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:
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.
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."
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):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Select Styling</title>
<link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="cherry">Cherry</option>
</select>
</body>
</html>
File CSS di esempio (selectExample.css):
/* All select elements on page */
select {
position: relative;
}
/* Style by class. Effects the text of the contained options. */
.blueText {
color: #0000FF;
}
/* Style by id. Effects position of the select drop down. */
#styledSelect {
left: 100px;
}
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">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>