如何使用CSS设置<select>下拉列表的样式？

Question

如何使用CSS设置<select>下拉列表的样式？

是否有一种仅限CSS的方式来设置<select>下拉列表的样式？

我需要<select>尽可能多地为一个表单设置样式，而不需要任何JavaScript。我可以在CSS中使用哪些属性？

此代码需要与所有主流浏览器兼容：

• Internet Explorer 6,7和8

• 火狐

• 苹果浏览器

我知道我可以使用JavaScript：示例。

我不是在谈论简单的造型。我想知道，只有CSS才能做到最好。

我在Stack Overflow上发现了类似的问题。

而这一次在Doctype.com。

Answer 1

这是可能的，但不幸的是，在我们作为开发人员需要的程度上，主要是基于Webkit的浏览器。以下是通过内置开发人员工具检查器从Chrome选项面板收集的CSS样式示例，经过改进以匹配大多数现代浏览器中当前支持的CSS属性：select&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;-webkit-appearance:&nbsp;button; &nbsp;&nbsp;&nbsp;&nbsp;-moz-appearance:&nbsp;button; &nbsp;&nbsp;&nbsp;&nbsp;-webkit-user-select:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;-moz-user-select:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;-webkit-padding-end:&nbsp;20px; &nbsp;&nbsp;&nbsp;&nbsp;-moz-padding-end:&nbsp;20px; &nbsp;&nbsp;&nbsp;&nbsp;-webkit-padding-start:&nbsp;2px; &nbsp;&nbsp;&nbsp;&nbsp;-moz-padding-start:&nbsp;2px; &nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#F07575;&nbsp;/*&nbsp;fallback&nbsp;color&nbsp;if&nbsp;gradients&nbsp;are&nbsp;not&nbsp;supported&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;background-image:&nbsp;url(../images/select-arrow.png),&nbsp;-webkit-linear-gradient(top,&nbsp;#E5E5E5,&nbsp;#F4F4F4);&nbsp;/*&nbsp;For&nbsp;Chrome&nbsp;and&nbsp;Safari&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;background-image:&nbsp;url(../images/select-arrow.png),&nbsp;-moz-linear-gradient(top,&nbsp;#E5E5E5,&nbsp;#F4F4F4);&nbsp;/*&nbsp;For&nbsp;old&nbsp;Fx&nbsp;(3.6&nbsp;to&nbsp;15)&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;background-image:&nbsp;url(../images/select-arrow.png),&nbsp;-ms-linear-gradient(top,&nbsp;#E5E5E5,&nbsp;#F4F4F4);&nbsp;/*&nbsp;For&nbsp;pre-releases&nbsp;of&nbsp;IE&nbsp;10*/ &nbsp;&nbsp;&nbsp;&nbsp;background-image:&nbsp;url(../images/select-arrow.png),&nbsp;-o-linear-gradient(top,&nbsp;#E5E5E5,&nbsp;#F4F4F4);&nbsp;/*&nbsp;For&nbsp;old&nbsp;Opera&nbsp;(11.1&nbsp;to&nbsp;12.0)&nbsp;*/&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;background-image:&nbsp;url(../images/select-arrow.png),&nbsp;linear-gradient(to&nbsp;bottom,&nbsp;#E5E5E5,&nbsp;#F4F4F4);&nbsp;/*&nbsp;Standard&nbsp;syntax;&nbsp;must&nbsp;be&nbsp;last&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;background-position:&nbsp;center&nbsp;right; &nbsp;&nbsp;&nbsp;&nbsp;background-repeat:&nbsp;no-repeat; &nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;#AAA; &nbsp;&nbsp;&nbsp;&nbsp;border-radius:&nbsp;2px; &nbsp;&nbsp;&nbsp;&nbsp;box-shadow:&nbsp;0px&nbsp;1px&nbsp;3px&nbsp;rgba(0,&nbsp;0,&nbsp;0,&nbsp;0.1); &nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;#555; &nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;inherit; &nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden; &nbsp;&nbsp;&nbsp;&nbsp;padding-top:&nbsp;2px; &nbsp;&nbsp;&nbsp;&nbsp;padding-bottom:&nbsp;2px; &nbsp;&nbsp;&nbsp;&nbsp;text-overflow:&nbsp;ellipsis; &nbsp;&nbsp;&nbsp;&nbsp;white-space:&nbsp;nowrap;}当您在基于Webkit的浏览器中的任何页面上运行此代码时，它应该更改选择框的外观，删除标准OS箭头并添加PNG箭头，在标签之前和之后放置一些间距，几乎任何您想要的。最重要的部分是appearance属性，它会改变元素的行为方式。它几乎可以在所有基于Webkit的浏览器中运行，包括移动浏览器，但Gecko似乎不支持appearanceWebkit。

Answer 2

选择元素及其下拉功能是很难的风格。Chris Heilmann对选择元素的风格属性证实了Ryan Dohery在对第一个答案的评论中所说的内容：“select元素是操作系统的一部分，而不是浏览器chrome。因此，它的风格非常不可靠，无论如何都不一定有意义。”

Answer 3

在设计选择下拉列表时我注意到的最大不一致是Safari和谷歌Chrome渲染（Firefox可以通过CSS完全自定义）。在通过互联网的晦涩深度搜索后，我遇到了以下内容，几乎完全解决了我对WebKit的疑虑：Safari和Google Chrome修复：select&nbsp;{ &nbsp;&nbsp;-webkit-appearance:&nbsp;none;}但是，这会删除下拉箭头。您可以使用附近div的背景，负边距或绝对定位在选择下拉列表上添加下拉箭头。*&nbsp;CSS属性中提供了更多信息和其他变量：-webkit-appearance。