如何在没有JavaScript的情况下仅使用CSS设置<select>下拉菜单？
是否有CSS的唯一方式来设置<select>下拉菜单的样式？
我需要尽可能人性地设计<select>表单，而不需要任何JavaScript。 我可以在CSS中使用哪些属性？
此代码需要与所有主流浏览器兼容：
我知道我可以用JavaScript做到这一点：例子。
我不是在谈论简单的造型。 我想知道，我们可以用CSS做什么最好。
我发现堆栈溢出类似的问题。
这个在Doctype.com上。
这里有3个解决方案：
解决方案＃1 - 外观：无 - 使用ie10-11解决方法（演示）
要隐藏选择元素上的默认箭头集appearance: none ，请将自己的自定义箭头添加到background-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* remove default arrow */
background-image: url(...); /* add custom arrow */
}
浏览器支持：
appearance: none非常好的浏览器支持（caniuse） - ie11-和firefox除外34-
我们可以改进这种技术并添加对ie10和ie11的支持
select::-ms-expand {
display: none; /* hide the default arrow in ie10 and ie11 */
}
如果ie9是一个问题 - 我们无法移除默认箭头（这意味着我们现在有两个箭头），但是，我们可以使用时髦的ie9选择器来至少撤销我们的自定义箭头 - 保留默认选择箭头完整。
/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0 ) {
select {
background-image:none9;
padding: 5px9;
}
}
全部一起：
select {
margin: 50px;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee;
}
/* CAUTION: IE hackery ahead */
select::-ms-expand {
display: none; /* remove default arrow in IE 10 and 11 */
}
/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0 ) {
select {
background:none9;
padding: 5px9;
}
}<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>这是可能的，但不幸的是，大多数情况下，我们作为开发人员需要基于Webkit的浏览器。 下面是通过内置开发人员工具检查器从Chrome选项面板收集的CSS样式示例，该样式经过改进以匹配大多数现代浏览器中当前支持的CSS属性：
select {
-webkit-appearance: button;
-moz-appearance: button;
-webkit-user-select: none;
-moz-user-select: none;
-webkit-padding-end: 20px;
-moz-padding-end: 20px;
-webkit-padding-start: 2px;
-moz-padding-start: 2px;
background-color: #F07575; /* fallback color if gradients are not supported */
background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */
background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Fx (3.6 to 15) */
background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of IE 10*/
background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */
background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
border-radius: 2px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
color: #555;
font-size: inherit;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
当您在基于Webkit的浏览器中的任何页面上运行此代码时，它应该更改选择框的外观，删除标准的OS箭头并添加PNG箭头，在标签前后放置一些空格，几乎任何您想要的内容。
最重要的部分是appearance属性，它改变了元素的行为。
它几乎适用于所有基于Webkit的浏览器，包括移动浏览器，尽管Gecko似乎并不像Webkit那样支持appearance 。
select元素及其下拉菜单很难风格化。
Chris Heilmann对选择元素的风格属性证实了Ryan Dohery在对第一个答案的评论中所说的话：
“select元素是操作系统的一部分，而不是浏览器的镶边，因此，样式非常不可靠，无论如何尝试都没有必要。”
链接地址: http://www.djcxy.com/p/1097.html上一篇: How to style a <select> dropdown with CSS only without JavaScript?