CSSだけで<option>をスタイルする方法は？

注：この質問は、カスタムドロップダウンの作成に関するものではありません。<option>CSSのselect要素内で要素をスタイリングする可能性についてのみです

ブラウザーの互換性<option>を持つ<select>要素のsをどのようにスタイルできますか？ドロップダウンをに変換してに変換する多くのJavaScriptの方法を知っています<li>。

<select class="select">
    <option selected>Select</option>
    <option>Blue</option>
    <option >Red</option>
    <option>Green</option>
    <option>Yellow</option>
    <option>Brown</option>
</select>

CSSだけで何ができるのか、IE9 +、Firefox、Chromeと互換性があるのか​​と尋ねています。

私はこのようなスタイルにしたい、またはできるだけ近づけたいです。

ここでhttp://jsfiddle.net/jitendravyas/juwz3/3/を試してみましたが、Chromeではフォントの色以外のスタイルは表示されませんが、Firefoxではさらに多くのスタイルが表示されます。Chromeで境界線とパディングを機能させる方法は？

2015年5月の編集

免責事項：以下にリンクされた回答からスニペットを取得しました：

重要な更新！

WebKitに加えて、Firefox 35以降では次のappearanceプロパティを使用できます。

コンボボックス-moz-appearanceのnone値で使用すると、ドロップダウンボタンが削除されます

したがって、デフォルトのスタイルを非表示にするために、select要素に次のルールを追加するのと同じくらい簡単です。

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

IE 11のサポートには、[ ::-ms-expand] [15]を使用できます。

select::-ms-expand { /* for IE 11 */
    display: none;
}

古い答え

残念ながら、純粋なCSSを使用することで、あなたが求めることは不可能です。ただし、これは回避策として選択できる同様のものです。以下のライブコードを確認してください。

div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }

<div>
  Select
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

編集する

先ほどの質問です。 JavaScriptなしでCSSのみで<select>ドロップダウンをスタイルする方法は？ そこに示されているように、Chromeで、そしてある程度までFirefoxでしか、望んだことを達成できません。それ以外の場合、残念ながら、選択をスタイリングするためのクロスブラウザーの純粋なCSSソリューションはありません。

クロスブラウザーでオプション要素のスタイルを設定する方法はありません。2番目のスクリーンショットほどではありません。あなたはそれらを太字にしてフォントサイズを設定することができるかもしれませんが、それはそれについてです...

私は以前、JavaScriptで機能をオーバーライドせずに、選択したアイテムをいじってみましたが、Chromeではそれが可能ではないと思います。プラグインを使用する場合でも、独自のコードを作成する場合でも、CSSだけではChrome / Safariは使えません。先ほど述べたように、Firefoxの方が優れています。