0

Windows 8 アプリケーションの場合、「Segoe UI Symbol」を使用して AppBar スタイルのボタンを作成できますが、長方形の領域に描画されているため、長方形の背景があります。ホバー中に背景を別の色に設定したいので、この長方形を取り除く必要があります。

以下の質問で指摘されているように、ボタンとスタイルは次のように定義されています。

これを達成する方法を教えてください。

キャラクターからイメージを作る

HTML:

<button id="myAppBarIcon" class="normal-size-icon">&#xE1D8;</button>

CSS:

.normal-size-icon {
    margin-top: 400px;
    margin-left: 630px;
    position: relative;
    font-size: 24px;
    font-family: 'Segoe UI Symbol';
    color: rgb(255, 255, 255);
    background: none;
    border: none;
}

アップデート：

以下のコードはトリックを行いますが、フォントが正しく配置されていません。それはおそらく、適切に調整されていないためです。下の画像はレイアウトを示しています。

.normal-size-icon {
    font-size: 24px;
    font-family: 'Segoe UI Symbol';
    color: rgb(555, 255, 255);
    min-width: 0;
    min-height: 0;
    border-radius: 50%;
    border-style: solid;
    padding: 0;
    text-align: center;
}

フォントが正しく配置されない

4

2 に答える 2

2

この時点でborder-radius:50%;、ボタンの形状が円に変わってから追加するように設定する必要がmin-width:0; min-height:0;あります。text-align:center;完全な css は次のとおりです。

.normal-size-icon {
    font-size: 24px;
    font-family: 'Segoe UI Symbol';
    color: rgb(555, 255, 255);
    min-width: 0;
    min-height: 0;
    border-radius: 50%;
    border-style: solid;
    padding: 0;
    text-align: center;
}

境界線が必要ない場合は、設定できますborder:none;。私の悪い英語でごめんなさい

于 2013-01-08T04:13:22.047 に答える
0

この動作は によって駆動されCSS hover selector、ボタンのデフォルトの CSS は、明るいテーマまたは暗いテーマに合わせたものを提供します。

button:hover, input[type=button]:hover, input[type=reset]:hover,
input[type=file]::-ms-browse:hover {
    background-color: rgba(255, 255, 255, 0.13);
    border-color: rgb(255, 255, 255);
}

次のようなもので、これを非常に具体的にオーバーライドできます。

.normal-size-icon:hover {
    background-color: red;
}

ただし、同様の処理が必要な追加の状態とオブジェクトが存在する可能性があります。

参照に含まれているui-light.cssとを見てください。![ui-dark.css][1]すべての答えはそこにあります:)

ここに画像の説明を入力

于 2013-01-08T01:39:16.363 に答える