Come faccio a dare stile a un <select> dropdown con solo CSS?

C'è un modo solo CSS per dare stile a un <select> dropdown?

Ho bisogno di stilizzare un modulo <select> per quanto umanamente possibile, senza alcun JavaScript. Quali sono le proprietà che posso usare per farlo nei CSS?

Questo codice deve essere compatibile con tutti i principali browser:

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

So di poterlo fare con JavaScript: Esempio.

E non sto parlando di semplice styling. Voglio sapere, quale è il meglio che possiamo fare solo con i CSS.

Ho trovato domande simili su Stack Overflow.

E questo su Doctype.com.

Peter Mortensen
Domanda modificata 7º settembre 2019 в 7:15
Programmazione
cross-browser html css combobox skinning
13º dicembre 2009 в 3:33
88 visualizzazioni

L'elemento select e la sua funzione dropdown sono difficili da stilizzare.

attributi di stile per l'elemento select di Chris Heilmann conferma quanto detto da Ryan Dohery in un commento alla prima risposta:

L'elemento select fa parte del sistema operativo, non del cromo del browser. Pertanto, è molto inaffidabile per lo stile, e non ha necessariamente senso provare comunque."

Jacob Alvarez
Risposta modificata 20º giugno 2016 в 4:41
Commentari (0)

I tag <select> possono essere stilizzati tramite CSS proprio come qualsiasi altro elemento HTML su una pagina HTML resa in un browser. Sotto c'è un esempio (troppo semplice) che posizionerà un elemento select nella pagina e renderà il testo delle opzioni in blu.

File HTML di esempio (selectExample.html):





  Select Styling



<select id="styledSelect" class="blueText">
  Apple
  Orange
  Cherry
Ali Shakiba
Risposta modificata 6º marzo 2016 в 6:49
Commentari (3)

Sì. Puoi dare uno stile a qualsiasi elemento HTML con il suo nome di tag, come questo:

select {
  font-weight: bold;
}

Naturalmente, puoi anche usare una classe CSS per stilizzarlo, come qualsiasi altro elemento:


<select class="important">
  Important Option
  Another Important Option
Paul Sweatte
Risposta modificata 26º ottobre 2013 в 12:31
Commentari (3)