Jak nastylovat rozbalovací okno <select> pouze pomocí CSS?
Existuje způsob, jak nastylovat rozbalovací okno <select> pouze pomocí CSS?
Potřebuji nastylovat formulář <select> tak, jak je to jen v lidských silách, bez JavaScriptu. Jaké vlastnosti k tomu mohu použít v CSS?
Tento kód musí být kompatibilní se všemi hlavními prohlížeči:
- Internet Explorer 6, 7 a 8
- Firefox
- Safari
Vím, že to zvládnu pomocí JavaScriptu: Příklad.
A to nemluvím o jednoduchém stylování. Chci vědět, co nejlépe můžeme udělat pouze s CSS.
Našel jsem podobné otázky na Stack Overflow.
A tento na Doctype.com.
![How To Get Selected Option Value From Drop Down List Using JavaScript [ with source code ]](https://img.youtube.com/vi/kzFJ7St_ma8/mqdefault.jpg)
Prvek select a jeho rozbalovací funkce se obtížně stylizují.
atributy stylu pro prvek select od Chrise Heilmanna potvrzuje to, co řekl Ryan Dohery v komentáři k první odpovědi:
"Prvek select je součástí operačního systému, nikoliv chrome prohlížeče. Proto je velmi nespolehlivé stylovat a nemá nutně smysl se o to pokoušet. stejně."
Značky <select> lze stylovat pomocí CSS stejně jako jakýkoli jiný prvek HTML na stránce HTML vykreslené v prohlížeči. Níže je uveden (příliš jednoduchý) příklad, který umístí prvek select na stránku a vykreslí text možností modře.
Příklad souboru HTML (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>Příklad souboru CSS (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;
}
Ano, můžete nastylovat libovolný prvek HTML podle jeho názvu tagu, například takto:
select {
font-weight: bold;
}Samozřejmě jej můžete také nastylovat pomocí třídy CSS, stejně jako jakýkoli jiný prvek:
<select class="important">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>
