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

102

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.

wprowadź opis obrazu tutaj

Chcę stylizować tak lub jak najbliżej.

wprowadź opis obrazu tutaj

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?

css html-select Jitendra Vyas
źródło
@ManseUK - Nie chodzi tylko o <option>całe menu
Jitendra Vyas
2
@ManseUK: Nie jestem pewien, czy to to samo. To pytanie dotyczy tego, czy możesz stylizować <select>wygląd elementu na stronie. To pytanie dotyczy tego, czy możesz stylizować listę <option>elementów.
Andy E
13
Na miłość boską NIE jest to duplikat ŻADNEGO z dwóch połączonych pytań (które, nawiasem mówiąc, różnią się od siebie). Jeden dotyczy wyłącznie stylizacji zaznaczenia, a nie opcji, podczas gdy ten dotyczy również stylizacji opcji, a drugi nie ma wymagania only-css / no-js.
matteo
12
Mam dość patrzenia na pytania błędnie oznaczone jako duplikaty lub niesłusznie zamknięte, które pozostają takie przez lata, mimo że okazało się, że są błędne.
matteo
2
@ovokuro codepen.io/lambder/pen/NbmwRb
Lambder

Odpowiedzi:

70

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>
Rozwiń fragment

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.

Savas Vedova
źródło
3
+1 dzięki, to dobry kod. ale w moim przypadku chcę zrobić z <select>. użycie nie <div>jest semantycznie poprawne.
Jitendra Vyas
2
@JitendraVyas, wiem, ale jak odpowiedziałem, to niemożliwe. To, co osiągnąłeś na pierwszym zdjęciu, to najwięcej, co możesz zrobić. Zobacz edycję. Swoją drogą, odpowiedziałem również na Twoje poprzednie pytanie, zobacz je.
Savas Vedova
Część „Ważna aktualizacja” zakłada, że ​​możesz stylizować optiontagi za pomocą css, ale nie możesz, możesz tylko stylizować selecttag. Co jest pokazane w tej odpowiedzi
svnm,
Oto wersja JavaScript powyższego przykładu, która dodaje wywołanie zwrotne i kilka innych przydatnych funkcji: dynamicdrive.com/dynamicindex1/ergodropdown.htm
coco
4

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

danwellman
źródło
2

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.

cchana
źródło
Usuń ostatni akapit - adres URL nie jest dostępny online.
kumarharsh