Ar yra tik CSS būdas stilizuoti išskleidžiamąjį langelį <select>
?
Man reikia kuo geriau stilizuoti <select>
formą be jokio JavaScript. Kokias savybes galiu naudoti CSS?
Šis kodas turi būti suderinamas su visomis pagrindinėmis naršyklėmis:
Žinau, kad galiu tai padaryti naudodamas "JavaScript": Pavyzdys.
Ir aš nekalbu apie paprastą stilių. Noriu sužinoti, ką geriausio galime padaryti tik su CSS.
Radau panašių klausimų Stack Overflow.
Ir šis Doctype.com.
Pasirinkimo elementą ir jo išskleidžiamąją funkciją yra sunku stilizuoti.
select elemento stiliaus atributai Chrisas Heilmannas patvirtina tai, ką Ryanas Dohery sakė pirmojo atsakymo komentare:
Pasirinkimo elementas yra elemento "select" dalis. operacinės sistemos, o ne naršyklės chromo. Todėl jis yra labai nepatikimas stilius, ir nebūtinai yra prasminga bandyti "
<select>
žymes galima stilizuoti naudojant CSS, kaip ir bet kurį kitą HTML elementą HTML puslapyje, kuris atvaizduojamas naršyklėje. Toliau pateikiamas (pernelyg paprastas) pavyzdys, pagal kurį puslapyje bus išdėstytas elementas select ir parinkčių tekstas bus atvaizduojamas mėlynai.
HTML failo pavyzdys (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>
CSS failo pavyzdys (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;
}
Taip. Bet kurį HTML elementą galite stilizuoti pagal jo žymės pavadinimą, pvz., taip:
select {
font-weight: bold;
}
Žinoma, jam stilizuoti taip pat galite naudoti CSS klasę, kaip ir bet kuriam kitam elementui:
<select class="important">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>