Cum stilizez un <select> dropdown doar cu CSS?

Există o modalitate exclusiv CSS de a stiliza o listă derulantă <select>?

Am nevoie să stilizez un formular <select> cât mai mult posibil, fără JavaScript. Care sunt proprietățile pe care le pot folosi pentru a face acest lucru în CSS?

Acest cod trebuie să fie compatibil cu toate browserele majore:

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

Știu că o pot face cu JavaScript: Exemplu.

Și nu mă refer la o simplă stilizare. Vreau să știu, ce cel mai bine putem face doar cu CSS.

Am găsit întrebări similare pe Stack Overflow.

Și aceasta pe Doctype.com.

Peter Mortensen
Întrebarea editată 7 septembrie 2019 в 7:15
Programare
cross-browser html css combobox skinning
13 decembrie 2009 в 3:33
77 vizualizări

Elementul de selecție și caracteristica sa dropdown sunt dificil de stilizat.

atribute de stil pentru elementul select de Chris Heilmann confirmă ceea ce a spus Ryan Dohery într-un comentariu la primul răspuns:

"Elementul select face parte din sistemului de operare, nu din browserul chrome. Prin urmare, este foarte nesigură la stilizare și nu are neapărat sens să încercăm să încercăm oricum."

Jacob Alvarez
Răspuns editat 20 iunie 2016 в 4:41
Comentarii (0)

Etichetele <select> pot fi stilizate prin CSS la fel ca orice alt element HTML dintr-o pagină HTML redată într-un browser. Mai jos este un exemplu (prea simplu) care va poziționa un element select pe pagină și va reda textul opțiunilor în albastru.

Fișier HTML de exemplu (selectExample.html):





  Select Styling



<select id="styledSelect" class="blueText">
  Apple
  Orange
  Cherry
Ali Shakiba
Răspuns editat 6 martie 2016 в 6:49
Comentarii (3)

Da. Puteți stiliza orice element HTML prin numele tag-ului său, astfel:

select {
  font-weight: bold;
}

Desigur, puteți utiliza și o clasă CSS pentru a-l stiliza, ca pe orice alt element:


<select class="important">
  Important Option
  Another Important Option
Paul Sweatte
Răspuns editat 26 octombrie 2013 в 12:31
Comentarii (3)