如何使用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 {
    -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似乎不支持appearanceWebkit。

Answer 2

选择元素及其下拉功能是很难的风格。

Chris Heilmann对选择元素的风格属性证实了Ryan Dohery在对第一个答案的评论中所说的内容：

“select元素是操作系统的一部分，而不是浏览器chrome。因此，它的风格非常不可靠，无论如何都不一定有意义。”

Answer 3

在设计选择下拉列表时我注意到的最大不一致是Safari和谷歌Chrome渲染（Firefox可以通过CSS完全自定义）。在通过互联网的晦涩深度搜索后，我遇到了以下内容，几乎完全解决了我对WebKit的疑虑：

Safari和Google Chrome修复：

select {
  -webkit-appearance: none;}

但是，这会删除下拉箭头。您可以使用附近div的背景，负边距或绝对定位在选择下拉列表上添加下拉箭头。

* CSS属性中提供了更多信息和其他变量：-webkit-appearance。