<select>
标签可以通过CSS进行样式设计,就像在浏览器中渲染的HTML页面上的任何其他HTML元素一样。下面是一个(过于简单的)例子,它将在页面上定位一个选择元素,并将选项的文本渲染成蓝色。
示例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>
示例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;
}
是的,你可以通过标签名称为任何HTML元素设置样式,像这样。
select {
font-weight: bold;
}
当然,你也可以像其他元素一样,使用CSS类来给它设置样式。
<select class="important">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>