8

私は次のHTMLを持っています（CSSが背景を黒にし、テキストを白にすることに注意してください）

<html>
  <select id="opts" style="background-color: black; color: white;">
    <option>first</option>
    <option>second</option>
  </select> 
</html>

Safariは、テキストの右側に表示される小さな三角形を前景のテキストと同じ色にするのに十分なほどスマートです。

他のブラウザは基本的にCSSを無視するので、それらも問題ありません。

ただし、Firefox 3は背景色を適用しますが、三角形は黒のままなので、このように表示することはできません。

例

これを修正する方法がわかりません-誰か助けてもらえますか？-moz-select-triangle-colorそのような不明瞭なものはありますか？

4

6 に答える 6

3

上記の修正の問題は、Safari では機能しないことです。白い背景が表示されてしまい、見栄えが悪くなります。この Moz 固有の疑似クラスを使用して、これを回避しました。

select:-moz-system-metric(windows-default-theme) {
    background-image: url(../images/selectBox.gif);
    background-position: right;
    background-repeat: no-repeat;
}

理論的には、派手な Windows テーマが有効な場合にのみ、この CSS が適用されます。これを参照してください https://developer.mozilla.org/en/CSS/%3a-moz-system-metric(windows-default-theme)

于 2009-03-16T12:21:24.580 に答える
3

問題があるに違いないVista。私は持っていてXP SP 2、それは正常に見えます。

于 2008-08-27T03:13:46.680 に答える
2

ボタンは黒である必要がありますか？代わりに、オプションに黒い背景を適用することができます。

于 2008-08-27T00:27:27.797 に答える
2

Vista で小さな黒い矢印を (黒い背景で) 表示するために、白いボックスの gif を作成し、次の CSS を使用しました。

select {
    background-image: url(../images/selectBox.gif);
    background-position: right;
    background-repeat: no-repeat;
}
于 2008-12-13T16:01:23.917 に答える
0

そのコードをファイルにドロップして ff3 にプッシュしましたが、表示されているものがわかりません...矢印はデフォルトの色で、背景が灰色で矢印が黒です。

スクロールバーもスタイリングしていますか？

投稿を更新しました。そこにある HTML は、読み込まれているすべての html であり、他の CSS/JS などはなく、写真に投稿されたとおりに見えます。

私はビスタにいることに注意してください。XPでは別のことをするかもしれません、私はチェックしていません

于 2008-08-27T02:19:16.873 に答える
0

Vistaの問題に違いない。XP SP 2 を使用していますが、見た目は正常です。

そうです。
XPで試してみたところ問題なく、テーマをWindowsクラシックに設定したVistaでも問題ありませんでした。firefox-vista-aero テーマのバグに違いありません。

于 2008-08-28T00:20:24.547 に答える