是否有CSS唯一的方式来设置＜select＞下拉列表的样式？
我需要尽可能人性化地设置＜select＞表单的样式，而不需要任何JavaScript。在CSS中，我可以使用哪些财产来执行此操作？
此代码需要与所有主要浏览器兼容：
Internet Explorer 6、7和8Firefox浏览器游猎
我知道我可以用JavaScript实现：示例。
我说的不是简单的造型。我想知道，我们只能用CSS做什么。
我在Stack Overflow上发现了类似的问题。
还有Doctype.com上的这个。
当前回答
我用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字形。
其他回答
本机解决方案
下面是一个简单的HTML/CSS示例：https://jsfiddle.net/dkellner/e1jdspvb/
诀窍：由于某种原因，当你给select标记一个size属性时，它会突然理解CSS。通常，此属性用于创建始终可见的固定高度列表，但作为一个副作用，您现在可以对其进行样式设置。因此，我们所做的只是给它一个大小，然后实现显示/隐藏机制，以返回下拉列表的感觉。
简约版，不像示例那样时尚，但更容易理解：
<style>
.stylish > span {position:relative;}
.stylish select {position:absolute;left:0px;transform:scaleY(0);transform-origin:top center;}
.stylish.dropped-down select {transform:scaleY(1);}
</style>
...
<div class="stylish">
<label> Choose your superhero: </label>
<span>
<input onclick = "this.closest('div').classList.toggle('dropped-down');"><br>
<select onclick = "this.closest('div').classList.remove('dropped-down');"
onchange = "this.closest('div').querySelector('input').value=this.value;"
size=9
>
<optgroup label="Fantasy"></optgroup>
<option value="gandalf"> Gandalf </option>
<option value="harry"> Harry Potter </option>
<option value="jon"> Jon Snow </option>
...
</select>
</span>
</div>
附加说明
这实际上实现了一个可编辑的下拉列表；使用只读以避免编辑＜optgroup＞标记是空的（不是围绕选项标记），这样更具风格
您还可以向下拉列表中添加悬停样式。
选择｛position:relative；float:left；width:21.4%；height:34px；background:#f9f9e0；border:1px solid#41533f；padding:0px 10px 0px 10px；color:#41533f；margin:-10px 0px 0px 20px；backbackground:透明；字体大小：12px；-webkit外观：无；-moz外观：无(https://alt-fit.com/images/global/select-button.png)100%/15%无重复选择：悬停｛background:url(https://alt-fit.com/images/global/select-button.png)100%/15%无重复#fff；}<html><head></head><body><select name=“type”class=“select”><option style=“color:#41533f；”value=“select option”>选择选项</option><option value=“选项1”>选项1</option><option value=“option 2”>选项2</option><option value=“选项3”>选项3</option></选择></body></html>
我用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字形。
纯交叉浏览器CSS选择控件样式
规则#1：切勿使用JAVASCRIPT来设置HTML元素的样式！
如果JS被禁用或阻止，CSS将崩溃并烧录。始终从纯CSS开始，然后在您喜欢的任何额外“脚本胶”上分层。记住<select>控件（如HTML中的所有表单字段）被替换为元素，这意味着设备上的浏览器和操作系统对控件的设计和布局具有一定的控制权。这就是为什么Windows、苹果和移动设备控件看起来都不同！这是有原因的。
不要用JavaScript或CSS黑客劫持控件设计，除非您觉得UI由于某种原因（如删除选择控件上的箭头）必须进行修改。下面的CSS不这样做。它接受了它可以在选择表单控件中重新设计的核心限制。我仍然会从我干净的CSS解决方案开始，然后在顶部覆盖任何自定义“黑客”。如果它们失败了，那么您的CSS将优雅地退回到一个始终适用于20多年浏览器的全局CSS设计。。。加上未来的！
下面的CSS代码跨浏览器（从1990年代到现在）工作，并将所有浏览器（过去和现在）与相同的基本CSS设计对齐。您可以根据需要自定义此代码。你可以在非常旧的浏览器中测试它，它应该给你一个与现代HTML5浏览器相匹配的外观和感觉，这应该一直是目标。
/* This CSS works in 20+ years of browsers without hacks, scripts, or tricks. */
body optgroup,
body optgroup:visited,
body optgroup:hover,
body optgroup:focus,
body optgroup:active {
margin: 0;
padding: 0;
font-style: inherit;
font-weight: bold;
cursor: pointer;
background: #fff;
border: none;
}
body optgroup:visited,
body optgroup:hover,
body optgroup:focus,
body optgroup:active {
background: #f9f9ff;
}
body option,
body option:visited,
body option:hover,
body option:focus,
body option:active {
margin: 0;
padding: 0;
cursor: pointer;
background: #fff;
border: none;
}
body option:visited,
body option:hover,
body option:focus,
body option:active {
background: #f9f9ff;
}
body select,
body select:visited,
body select:hover,
body select:focus,
body select:active {
display: inline-block;
width: auto;
height: auto;
min-width: 0;
max-width: none;
padding: .17em .17em;
margin: 0;
text-transform: none;
border-radius: .2em;
border: 2px solid #bbb;
background: #fff;
cursor: pointer;
-webkit-appearance: listbox;
-moz-appearance: listbox;
line-height: normal;
}
body select:visited,
body select:hover,
body select:focus,
body select:active {
background: #f9f9ff;
border: 2px solid #999;
}
body select:focus {
background: #fff;
border: 2px solid #999;
}
body select:required:visited:valid,
body select:required:valid {
background: #fff;
border: 2px solid #7fbe96;
}
body select:required:hover:valid {
background: #f9f9ff;
border: 2px solid #278b3d;
}
body select:required:focus:valid {
background: #fff;
border: 2px solid #278b3d;
}
body select:required:visited:invalid,
body select:required:invalid {
background: #fff;
border: 2px solid #ff6565;
}
body select:required:hover:invalid {
background: #f9f9ff;
border: 2px solid #ce2f2f;
}
body select:required:focus:invalid {
background: #fff;
border: 2px solid #ce2f2f;
}
body select[disabled],
body select[readonly],
body select[disabled="disabled"],
body select[readonly="readonly"],
body select[disabled]:visited,
body select[readonly]:visited,
body select[disabled="disabled"]:visited,
body select[readonly="readonly"]:visited,
body select[disabled]:hover,
body select[readonly]:hover,
body select[disabled="disabled"]:hover,
body select[readonly="readonly"]:hover,
body select[disabled]:focus,
body select[readonly]:focus,
body select[disabled="disabled"]:focus,
body select[readonly="readonly"]:focus,
body select[disabled]:active,
body select[readonly]:active,
body select[disabled="disabled"]:active,
body select[readonly="readonly"]:active {
border: 2px solid #bbb;
background: #f0f0f0;
color: #999;
cursor: default !important;
}
使用clip属性裁剪选择元素的边框和箭头，然后将自己的替换样式添加到包装中：
<!DOCTYPE html><html><head><style>选择｛位置：绝对；剪辑：矩形（2px 49px 19px 2px）；z索引：2；｝body＞span｛display：块；位置：相对；宽度：64px；高度：21px；边框：2px纯绿色；背景：url(http://www.stackoverflow.com/favicon.ico)右1px不重复；}</style></head><span><选择><option value=“”>Alpha</option><option value=“”>Beta版</option><option value=“”>Charlie</option></选择></span></html>
使用不透明度为零的第二次选择使按钮可单击：
<!DOCTYPE html><html><head><style>#实{位置：绝对；剪辑：矩形（2px 51px 19px 2px）；z索引：2；}#假｛位置：绝对；不透明度：0；｝body>span｛display：块；位置：相对；宽度：64px；高度：21px；背景：url(http://www.stackoverflow.com/favicon.ico)右1px不重复；}</style></head><span><select id=“real”><option value=“”>Alpha</option><option value=“”>Beta版</option><option value=“”>Charlie</option></选择><select id=“fake”><option value=“”>Alpha</option><option value=“”>Beta版</option><option value=“”>Charlie</option></选择></span></html>
Webkit和其他浏览器的坐标不同，但@media查询可以涵盖这一点。
工具书类
Dojo FX测试：dojox.FX.ext-Dojo.complexCSS掩码：使用rect函数测试剪辑属性，并自动将值剪辑到边框框
推荐文章
- 防止滚动条增加到Chrome页面的宽度
- 使用图像而不是单选按钮
- 将RGB转换为白色的RGBA
- 我可以嵌套一个<按钮>元素内< >使用HTML5?
- 设置TextView文本从html格式的字符串资源在XML
- 为什么我的球(物体)没有缩小/消失?
- Twitter Bootstrap 3 Sticky Footer
- CSS在特定的“内联块”项之前/之后换行
- 很好的初学者教程socket.io?
- 内嵌CSS有什么不好?
- 点击下载Href图片链接
- HtmlSpecialChars在JavaScript中等价于什么?
- 我如何删除背景图像在css?
- 如何克服HTML表单嵌套的限制?
- 如何使Bootstrap 4卡在卡列相同的高度?
