Onko olemassa vain CSS-tapaa muotoilla <select>
pudotusvalikko?
Minun on tyyliteltävä <select>
-lomake niin paljon kuin mahdollista ilman JavaScriptiä. Mitä ominaisuuksia voin käyttää tähän CSS:ssä?
Tämän koodin on oltava yhteensopiva kaikkien tärkeimpien selainten kanssa:
Tiedän, että voin tehdä sen JavaScriptillä: Esimerkki.
Enkä puhu pelkästä muotoilusta. Haluan tietää, mitä parasta voimme tehdä vain CSS:llä.
Löysin vastaavia kysymyksiä Stack Overflow'sta.
Ja tämän Doctype.com-sivustolta.
Valitse-elementtiä ja sen pudotusvalikkoa on vaikea muotoilla.
Chris Heilmannin kirjoittama style attributes for select element vahvistaa sen, mitä Ryan Dohery sanoi ensimmäisen vastauksen kommentissa:
"Select-elementti on osa käyttöjärjestelmään, ei selaimen kromiin. Siksi se on hyvin epäluotettavaa tyylitellä, eikä ole välttämättä järkevää yrittää sitä. joka tapauksessa."
<select>
-tagit voidaan muotoilla CSS:n avulla aivan kuten mikä tahansa muu HTML-elementti selaimessa esitetyllä HTML-sivulla. Alla on (liian yksinkertainen) esimerkki, joka sijoittaa select-elementin sivulle ja esittää vaihtoehtojen tekstin sinisenä.
Esimerkki HTML-tiedosto (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>
Esimerkki CSS-tiedosto (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;
}
Kyllä. Voit tyylitellä minkä tahansa HTML-elementin sen tagin nimellä, esimerkiksi näin:
select {
font-weight: bold;
}
Voit tietysti myös käyttää CSS-luokkaa sen tyylittelyyn, kuten minkä tahansa muun elementin:
<select class="important">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>