Jak mogę stylizować <select> dropdown używając tylko CSS?

Czy istnieje sposób CSS-only, aby stylizować <select> dropdown?

Muszę stylizować formularz <select> tak bardzo jak to tylko możliwe, bez żadnego JavaScriptu. Jakie są właściwości, których mogę użyć do tego celu w CSS?

Ten kod musi być kompatybilny z wszystkimi głównymi przeglądarkami:

  • Internet Explorer 6, 7, i 8
  • Firefox
  • Safari

Wiem, że mogę to zrobić za pomocą JavaScript: Przykład.

I nie mówię tu o prostej stylizacji. Chcę wiedzieć, co najlepszego możemy zrobić używając tylko CSS.

Znalazłem podobne pytania na Stack Overflow.

I to na Doctype.com.

Peter Mortensen
Edytowane pytanie 7. września 2019 в 7:15
Programowanie
cross-browser html css combobox skinning
13. grudnia 2009 в 3:33
91 opinie

Element select i jego funkcja rozwijania są trudne do stylizacji.

style attributes for select element autorstwa Chrisa Heilmanna potwierdza to, co Ryan Dohery powiedział w komentarzu do pierwszej odpowiedzi:

"Element select jest częścią m.in. systemu operacyjnego, a nie chromu przeglądarki. Dlatego jest to bardzo niewiarygodny do stylizacji i niekoniecznie ma sens próbować anyway."

Jacob Alvarez
Edytowana odpowiedź 20. czerwca 2016 в 4:41
Komentarze (0)

Znaczniki <select> mogą być stylizowane za pomocą CSS tak samo jak każdy inny element HTML na stronie HTML renderowanej w przeglądarce. Poniżej znajduje się (zbyt prosty) przykład, który umieści element select na stronie i wyrenderuje tekst opcji na niebiesko.

Przykładowy plik HTML (selectExample.html):





  Select Styling



<select id="styledSelect" class="blueText">
  Apple
  Orange
  Cherry
Ali Shakiba
Edytowana odpowiedź 6. marca 2016 в 6:49
Komentarze (3)

Tak. Możesz stylizować dowolny element HTML za pomocą jego nazwy znacznika, jak poniżej:

select {
  font-weight: bold;
}

Oczywiście, możesz również użyć klasy CSS, aby go stylizować, tak jak każdy inny element:


<select class="important">
  Important Option
  Another Important Option
Paul Sweatte
Edytowana odpowiedź 26. października 2013 в 12:31
Komentarze (3)