是否有CSS唯一的方式来设置<select>下拉列表的样式?

我需要尽可能人性化地设置<select>表单的样式,而不需要任何JavaScript。在CSS中,我可以使用哪些财产来执行此操作?

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

Internet Explorer 6、7和8Firefox浏览器游猎

我知道我可以用JavaScript实现:示例。

我说的不是简单的造型。我想知道,我们只能用CSS做什么。

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

还有Doctype.com上的这个。


当前回答

博客文章HowtoCSS表单下拉样式没有JavaScript适合我,但在Opera中失败了:

选择{边框:0无;颜色:#FFFFFF;背景:透明;字体大小:20px;字号:粗体;填充:2px 10px;宽度:378px;*宽度:350px;*背景:#58B14C;}#主要选举{溢出:隐藏;宽度:350px;-moz边框半径:9px 9px 9px 9px;-webkit边框半径:9px 9px 9px 9px;边框半径:9px 9px 9px 9px;方框阴影:1px 1px 11px#3330033;background:url(“arrow.gif”)无重复滚动319px 5px#58B14C;}<div id=“mainselection”><选择><option>选择选项</option><option>选项1</option><option>选项2</option></选择></div>

其他回答

在现代浏览器中,在CSS中设置<select>的样式相对轻松。外观方面:唯一棘手的部分是替换箭头(如果你想要的话)。下面是一个使用内联data:URI和纯文本SVG的解决方案:

选择{-moz外观:无;-webkit外观:无;外观:无;背景重复:无重复;背景尺寸:0.5em自动;背景位置:右0.25em中心;右侧填充:1em;backgroundimage:url(“data:image/svg+xml;charset=utf-8\<svg xmlns='http://www.w3.org/2000/svg'viewBox='0 0 60 40'>\<多边形点=',0 60,0 30,40'style='fill:black;'/>\</svg>“);}<选择><option>选项1</option><option>选项2</option></选择><select style=“font-size:2rem;”><option>选项1</option><option>选项2</option></选择>

其余的样式(边框、填充、颜色等)相当简单。

这适用于我刚刚尝试过的所有浏览器(Firefox 50、Chrome 55、Edge 38和Safari 10)。关于Firefox的一个注意事项是,如果你想在数据URI中使用#字符(例如,fill:#000),你需要转义它(fill:%23000)。

这里有一个基于我在这次讨论中最喜欢的想法的解决方案。这允许直接设置<select>元素的样式,而无需任何附加标记。

它可以使用Internet Explorer 10(及更高版本),并为Internet Explorer 8/9提供安全回退。这些浏览器需要注意的一点是,背景图像必须定位并足够小,以便隐藏在本机扩展控件后面。

HTML

<select name='options'>
  <option value='option-1'>Option 1</option>
  <option value='option-2'>Option 2</option>
  <option value='option-3'>Option 3</option>
</select>

SCSS

body {
  padding: 4em 40%;
  text-align: center;
}

select {
  $bg-color: lightcyan;
  $text-color: black;
  appearance: none; // Using -prefix-free http://leaverou.github.io/prefixfree/
  background: {
    color: $bg-color;
    image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1255/caret--down-15.png");
    position: right;
    repeat: no-repeat;
  }
  border: {
    color: mix($bg-color, black, 80%);
    radius: .2em;
    style: solid;
    width: 1px;
    right-color: mix($bg-color, black, 60%);
    bottom-color: mix($bg-color, black, 60%);
  }
  color: $text-color;
  padding: .33em .5em;
  width: 100%;
}

// Removes default arrow for Internet Explorer 10 (and later)
// Internet Explorer 8/9 gets the default arrow which covers the caret
// image as long as the caret image is smaller than and positioned
// behind the default arrow
select::-ms-expand {
    display: none;
}

代码笔

http://codepen.io/ralgh/pen/gpgbGx

对您可以通过标记名来设置任何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>

这是可能的,但不幸的是,根据开发人员的要求,大多数情况下都是基于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 Firefox (3.6 to 15) */
  background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of Internet Explorer  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箭头,在标签前后放置一些间距,几乎是您想要的任何内容。

最重要的部分是外观属性,它改变了元素的行为方式。

它在几乎所有基于WebKit的浏览器中都能完美工作,包括移动浏览器,尽管Gecko似乎不像WebKit那样支持外观。

在设置选择下拉列表样式时,我注意到的最大的不一致是Safari和Google Chrome渲染(Firefox可以通过CSS完全自定义)。在互联网的黑暗深处进行了一些搜索后,我发现了以下内容,这几乎完全解决了我对WebKit的疑虑:

Safari和Google Chrome修复程序:

select {
  -webkit-appearance: none;
}

但是,这会删除下拉箭头。您可以使用带有背景、负边距或绝对位于select下拉列表上方的附近div添加下拉箭头。

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