是否有CSS唯一的方式来设置＜select＞下拉列表的样式？
我需要尽可能人性化地设置＜select＞表单的样式，而不需要任何JavaScript。在CSS中，我可以使用哪些财产来执行此操作？
此代码需要与所有主要浏览器兼容：
Internet Explorer 6、7和8Firefox浏览器游猎
我知道我可以用JavaScript实现：示例。
我说的不是简单的造型。我想知道，我们只能用CSS做什么。
我在Stack Overflow上发现了类似的问题。
还有Doctype.com上的这个。
当前回答
对您可以通过标记名来设置任何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>
其他回答
仅限CSS和HTML的解决方案
它似乎与Chrome、Firefox和Internet Explorer 11兼容。但请留下您对其他网络浏览器的反馈。
正如Danield的回答所建议的那样，我将我的选择包装在一个div中（甚至两个div用于x浏览器兼容性），以获得预期的行为。
看见http://jsfiddle.net/bjap2/
HTML格式：
<div class="sort-options-wrapper">
<div class="sort-options-wrapper-2">
<select class="sort-options">
<option value="choiceOne">choiceOne</option>
<option value="choiceOne">choiceThree</option>
<option value="choiceOne">choiceFour</option>
<option value="choiceFiveLongTestPurpose">choiceFiveLongTestPurpose</option>
</select>
</div>
<div class="search-select-arrow-down"></div>
</div>
注意两个div包装器。
还请注意，添加了额外的div以将箭头向下按钮放置在您喜欢的位置（绝对位置），这里我们将其放在左侧。
CSS
.sort-options-wrapper {
display: inline-block;
position: relative;
border: 1px solid #83837F;
}
/* This second wrapper is needed for x-browser compatibility */
.sort-options-wrapper-2 {
overflow: hidden;
}
select {
margin-right: -19px; /* That's what is hiding the default-provided browser arrow */
padding-left: 13px;
margin-left: 0;
border: none;
background: none;
/* margin-top & margin-bottom must be set since some
browsers have default values for select elements */
margin-bottom: 1px;
margin-top: 1px;
}
select:focus {
outline: none; /* Removing default browsers outline on focus */
}
.search-select-arrow-down {
position: absolute;
height: 10px;
width: 12px;
background: url(http://i.imgur.com/pHIYN06.png) scroll no-repeat 2px 0px;
left: 1px;
top: 5px;
}
＜select＞标签可以通过CSS进行样式设置，就像在浏览器中呈现的HTML页面上的任何其他HTML元素一样。下面是一个（过于简单）的示例，它将在页面上放置一个select元素，并将选项的文本呈现为蓝色。
示例HTML文件（选择Example.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;
}
我用Bootstrap找到了你的案子。这是最简单的解决方案：
选择表单控件{-moz外观：无；-webkit外观：无；外观：无；背景位置：右中心；背景重复：无重复；背景尺寸：1ex；背景原点：内容框；背景图像：url(“数据：image/svg+xml；base64，PD94bWwgdmVyc2lvbj0iMS4wIiBlbbNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9y9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4Wxu czpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1UcyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmicCiAgIHht bG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4NTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0ZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmRmJERj4K ICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0GogICAgICgIDxKYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAg ICAgICAc8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgPC9jYzpXb3JrGogICAgPC9 yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLj AxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGLKPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgIHg9IjI5MS40Mjg1NiIKICAgICagIHN0eWxlPSJmb250LXeWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlc1zcGFjaW5nOjBweDt3b3JkLXNwYWpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWpdHk6MTtzdHJva2U6bm9uZTtzdHJVa2Utd2lkdGg6MXB4O30cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO30cm9 rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgT0iNjI5LjUwNTA3GogICAgICB4PSIyOTEuNDI4NTYiCiAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0GogICAg PGcKICAgICAgIglkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWXLOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm2hbDtmb2 50LXN0cmV0Y2g6bm9yWFsO 2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnqtc3blY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7Zmlsbc1vcGFjaXR5OjE7c3 Ryb2tlOm5vbmU7c3 Ryb2tl LXdpZHRojFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJVa2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IggICAgICBzdHls ZT0iZmlsbDojMzMzMz MzO2ZpbGwtb3BhY2l0eToxIggICAgICBkPSJtIDizNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1OD A0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEynSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTauNTU4MDQsLTauNTU4MDQgLTEuNDuwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAUNTU4MDDMsLTauntU4MDDQgLTeuNDuwodksLTauNTu4MDQgLTEuMDA4OTMsMCBsiC0zLjcw NTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODD AzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MMSC41NTWGNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYUNTYyNSSwtMTYuNTQwMTcgeiIgLz4KICAgIDwZz4KICA8L2c+Cjwvc3ZnPgo=“）；}<link href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css“rel=”stylesheet“/><section class=“container”><form class=“form horizontal”><select class=“表单控件”><option>一个</option><option>两个</option></选择></form></section>
注意：base64在SVG中是一个V字形。
一个使用：after和：before来完成这个技巧的非常好的例子是在使用CSS3 | CSSDeck设置选择框的样式中
select元素及其下拉功能很难设置样式。
Chris Heilmann的select元素的风格属性证实了Ryan Dohery对第一个答案的评论：
“select元素是操作系统，而不是浏览器chrome。因此风格不可靠，尝试也不一定有意义无论如何"
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?
