Jak stylizować <option> za pomocą samego CSS?

Uwaga: to pytanie nie dotyczy tworzenia niestandardowego menu. Chodzi tylko o możliwości stylizacji <option>elementów w ramach zaznaczonego elementu w CSS

Jak mogę styl <option>ów z <select>elementu o zgodności z różnymi przeglądarkami? Znam wiele sposobów na JavaScript, które dostosowują menu do konwersji <li>, o które nie pytam.

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

Pytam, co mogłoby być możliwe tylko z CSS, z kompatybilnością z IE9 +, Firefox i Chrome.

Chcę stylizować tak lub jak najbliżej.

Próbowałem tutaj http://jsfiddle.net/jitendravyas/juwz3/3/ , ale Chrome nie pokazuje żadnego stylu oprócz koloru czcionki, podczas gdy Firefox pokazuje trochę więcej. Jak sprawić, by obramowanie i wypełnienie działały również w Chrome?

EDYCJA 2015 Maj

Zastrzeżenie: pobrałem fragment odpowiedzi, do której link znajduje się poniżej:

Ważna aktualizacja!

Oprócz WebKit, od Firefox 35 będziemy mogli korzystać z appearancewłaściwości:

Użycie -moz-appearancez nonewartością na combobox teraz usuń przycisk rozwijania

Więc teraz, aby ukryć domyślny styl, wystarczy dodać następujące reguły do ​​naszego elementu select:

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

Aby uzyskać obsługę IE 11, możesz użyć [ ::-ms-expand] [15].

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

Stara odpowiedź

Niestety to, o co prosisz, nie jest możliwe przy użyciu czystego CSS. Jednak tutaj jest coś podobnego, co możesz wybrać jako obejście. Sprawdź poniższy kod na żywo.

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>

EDYTOWAĆ

Oto pytanie, które zadałeś jakiś czas temu. Jak stylizować listę rozwijaną <select> za pomocą CSS tylko bez JavaScript? Jak tam mówi, tylko w Chrome i do pewnego stopnia w Firefoksie możesz osiągnąć to, co chcesz. W przeciwnym razie, niestety, nie ma rozwiązania CSS działającego wyłącznie w różnych przeglądarkach, służącego do stylizacji wybranego elementu.

Nie ma sposobu na stylizowanie elementów opcji w różnych przeglądarkach, na pewno nie w zakresie drugiego zrzutu ekranu. Możesz być w stanie pogrubić je i ustawić rozmiar czcionki, ale to wszystko ...

Bawiłem się wybranymi elementami wcześniej i bez zastępowania funkcjonalności za pomocą JavaScript, nie sądzę, aby było to możliwe w Chrome. Niezależnie od tego, czy używasz wtyczki, czy piszesz własny kod, tylko CSS jest nie do przyjęcia dla Chrome / Safari i, jak powiedziałeś, Firefox lepiej sobie z tym radzi.