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:
Ș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.
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."
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):
<!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>
Fișier CSS de exemplu (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;
}
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">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>