黒い背景の HTML 選択タグ - Firefox 3 ではドロップダウンの三角形が表示されません

StackOverflow https://stackoverflow.com/questions/29244

質問

次のHTMLがあります（CSSにより背景が黒、テキストが白になっていることに注意してください）

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

Safari は、テキストの右側に表示される小さな三角形を前景テキストと同じ色にするのに十分な機能を備えています。

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

ただし、Firefox 3 では背景色が適用されますが、三角形は黒のままなので、次のように見えません。

Example

これを修正する方法がわかりません - 誰か助けてくれませんか?ありますか -moz-select-triangle-color それともそのような曖昧なものですか？

役に立ちましたか？

解決

でなければなりません Vista 問題。私は持っている XP SP 2 そしてそれは普通に見えます。

他のヒント

上記の修正の問題は、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)

ボタンは黒でなければなりませんか？代わりにオプションに黒い背景を適用することもできます。

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

select {
    background-image: url(../images/selectBox.gif);
    background-position: right;
    background-repeat: no-repeat;
}

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

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

投稿を更新しました。そこにある HTML は文字通りになりました 全て ロードされている HTML であり、他の CSS/JS などはありません。それでも、写真に投稿されているとおりに見えます。

私はVistaを使用していることに注意してください。XPでは違うことをするかもしれない、私はチェックしていない

Vista の問題に違いありません。XP SP 2 を使用していますが、正常に見えます。

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top