<Seçenek> yalnızca CSS ile nasıl biçimlendirilir?

Not: Bu soru, özel bir açılır menü oluşturmakla ilgili değildir. Yalnızca CSS'deki <option>seçili öğe içindeki stil öğelerinin olasılıkları ile ilgilidir

Tarayıcılar arası uyumluluğa sahip <option>bir <select>öğenin stillerini nasıl biçimlendirebilirim? Açılır listeyi dönüştürmek için özelleştiren ve <li>sormadığım birçok JavaScript yolu biliyorum .

<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 ve Chrome uyumluluğu ile yalnızca CSS ile nelerin mümkün olabileceğini soruyorum.

Böyle ya da olabildiğince yakın stil vermek istiyorum.

Burada http://jsfiddle.net/jitendravyas/juwz3/3/ denedim , ancak Chrome yazı tipi rengi dışında herhangi bir stil göstermiyor, Firefox biraz daha gösteriyor. Chrome'da da kenarlık ve dolgu nasıl çalışır?

EDIT 2015 Mayıs

Sorumluluk reddi beyanı: Snippet'i aşağıda bağlantısı verilen cevaptan aldım:

Önemli Güncelleme!

WebKit'e ek olarak, Firefox 35'ten itibaren şu appearanceözelliği kullanabileceğiz :

Bir combobox üzerindeki değer -moz-appearanceile kullanmak noneşimdi açılır düğmeyi kaldırın

Şimdi varsayılan stili gizlemek için, seçtiğimiz öğeye aşağıdaki kuralları eklemek kadar kolay:

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

IE 11 desteği için [ ::-ms-expand] [15] kullanabilirsiniz.

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

Eski Cevap

Ne yazık ki sorduğunuz şey saf CSS kullanarak mümkün değil. Ancak, işte size benzer bir çözüm olarak seçebileceğiniz bir şey var. Aşağıdaki canlı kodu kontrol edin.

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>

DÜZENLE

İşte bir süre önce sorduğunuz soru. Bir <select> açılır menüsünü yalnızca JavaScript olmadan CSS ile nasıl biçimlendirebilirim? Orada söylediği gibi, yalnızca Chrome'da ve bir dereceye kadar Firefox'ta istediğinizi elde edebilirsiniz. Aksi takdirde, maalesef, bir seçimi şekillendirmek için çapraz tarayıcı saf CSS çözümü yoktur.

İkinci ekran görüntünüzün kapsamı dışında, seçenek öğelerini şekillendirmenin tarayıcılar arası bir yolu yoktur. Onları kalın yapabilir ve yazı tipi boyutunu ayarlayabilirsiniz, ancak bununla ilgili olacaktır ...

JavaScript ile işlevselliği geçersiz kılmadan önce ve olmadan seçili öğelerle oynadım, bunun Chrome'da mümkün olduğunu düşünmüyorum. İster bir eklenti kullanın ister kendi kodunuzu yazın, CSS yalnızca Chrome / Safari için uygun değildir ve sizin de söylediğiniz gibi, Firefox bununla başa çıkmada daha iyidir.