web-dev-qa-db-ja.com

CSSだけで<option>をスタイルするにはどうすればいいですか？

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

クロスブラウザ互換性を持つ<option>要素の<select>sをどのようにスタイルすることができますか？私は<li>に変換するためにドロップダウンをカスタマイズする多くのJavaScript方法を知っています。

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

私は、IE9 +、Firefox、そしてChromeとの互換性で、CSSだけで何ができるのかを尋ねています。

enter image description here

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

enter image description here

私はここで試してみました http://jsfiddle.net/jitendravyas/juwz3/3/ しかし、Chromeはフォントの色以外のスタイルを表示しません、一方Firefoxはもう少し示しています。 Chromeでもボーダーとパディングを機能させるにはどうすればいいですか？

csscss3html-select
99
Jitendra Vyas

EDIT 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>

EDIT

これはあなたがしばらく前に尋ねた質問です。 JavaScriptを使わずにCSSだけで<select>ドロップダウンのスタイルを設定するにはどうすればいいですか？ そこで説明しているように、Chromeではある程度、Firefoxではある程度はあなたが望むものを実現できます。そうでなければ、残念ながら、選択をスタイルするためのクロスブラウザの純粋なCSSソリューションはありません。

70
Savas Vedova

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

4
danwellman

JavaScriptで機能をオーバーライドする前と後で、選択したアイテムをいろいろ試したことがありますが、Chromeでは不可能だと思います。プラグインを使用しているか独自のコードを作成しているかに関係なく、CSSはChrome/Safariには向いていません。Firefoxはそれを処理するのに優れています。

2
cchana