Jak mogę stylizować <select> dropdown używając tylko CSS?
Czy istnieje sposób CSS-only, aby stylizować <select> dropdown?
Muszę stylizować formularz <select> tak bardzo jak to tylko możliwe, bez żadnego JavaScriptu. Jakie są właściwości, których mogę użyć do tego celu w CSS?
Ten kod musi być kompatybilny z wszystkimi głównymi przeglądarkami:
- Internet Explorer 6, 7, i 8
- Firefox
- Safari
Wiem, że mogę to zrobić za pomocą JavaScript: Przykład.
I nie mówię tu o prostej stylizacji. Chcę wiedzieć, co najlepszego możemy zrobić używając tylko CSS.
Znalazłem podobne pytania na Stack Overflow.
I to na Doctype.com.
Element select i jego funkcja rozwijania są trudne do stylizacji.
style attributes for select element autorstwa Chrisa Heilmanna potwierdza to, co Ryan Dohery powiedział w komentarzu do pierwszej odpowiedzi:
"Element select jest częścią m.in. systemu operacyjnego, a nie chromu przeglądarki. Dlatego jest to bardzo niewiarygodny do stylizacji i niekoniecznie ma sens próbować anyway."
Znaczniki <select> mogą być stylizowane za pomocą CSS tak samo jak każdy inny element HTML na stronie HTML renderowanej w przeglądarce. Poniżej znajduje się (zbyt prosty) przykład, który umieści element select na stronie i wyrenderuje tekst opcji na niebiesko.
Przykładowy plik 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>Przykładowy plik 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;
}
Tak. Możesz stylizować dowolny element HTML za pomocą jego nazwy znacznika, jak poniżej:
select {
font-weight: bold;
}Oczywiście, możesz również użyć klasy CSS, aby go stylizować, tak jak każdy inny element:
<select class="important">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>
