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

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

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

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

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

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

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

还有Doctype.com上的这个。


当前回答

从InternetExplorer10开始,您可以使用::-ms-expand伪元素选择器来样式和隐藏下拉箭头元素。

select::-ms-expand {
    display:none;
    /* or visibility: hidden; to keep it's space/hitbox */
}

其余的样式应该与其他浏览器类似。

下面是Danield的jsfiddle的一个基本分支,它应用了对IE10的支持

其他回答

一个使用:after和:before来完成这个技巧的非常好的例子是在使用CSS3 | CSSDeck设置选择框的样式中

这是一个适用于所有现代浏览器的版本。关键是使用外观:无,这将删除默认格式。由于所有的格式都不存在了,您必须重新添加箭头,以在视觉上区分选择和输入。

工作示例:https://jsfiddle.net/gs2q1c7p/

选择:不([多个]){-webkit外观:无;-moz外观:无;背景位置:右50%;背景重复:无重复;背景图像:url(数据:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRR vYmU6bnM6bWV0YS8IIHg6eG1wdGs9IkFkb2JlIFhNUCBDB3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbeG1wPSJodHwOi8 vbnMuYWRvYmUuY29tL3hhcC8xLjAvIB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1spnM 6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9ZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtC5paWQ6NDZFNDEWNjlGNzFEMTFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9固有C5kaWQ6NDZFND EWNkFGNzFEMTFTFMkJEQ 0VDRTM10RCMz MyMkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZ WY6ZG9jdW1lbnJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAMAzNENEOH+do8AAAAAASUVORK5CYII=);衬垫:.5cm;右侧填充:1.5em}#我的选择{边框半径:0}<select id=“mySelect”><option>选项1</option><option>选项2</option></选择>

这里有一个基于我在这次讨论中最喜欢的想法的解决方案。这允许直接设置<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

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

Safari和Google Chrome修复程序:

select {
  -webkit-appearance: none;
}

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

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

以下是三种解决方案:

解决方案#1-外观:无-使用Internet Explorer 10-11解决方案(演示)

--

要隐藏默认箭头集外观,请在select元素上选择none,然后添加带有背景图像的自定义箭头

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* Remove default arrow */
   background-image: url(...);   /* Add custom arrow */
}

浏览器支持:

外观:除了Internet Explorer,没有一个浏览器支持非常好(caniuse)。

我们可以通过添加

select::-ms-expand {
    display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}

如果Internet Explorer 9是一个问题,我们没有办法删除默认箭头(这意味着我们现在有两个箭头),但是,我们可以使用一个时髦的Internet Explorer 9选择器。

至少撤销我们的自定义箭头-保留默认的选择箭头不变。

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background-image:none\9;
        padding: 5px\9;
    }
}

所有这些:

选择{边距:50px;宽度:150px;填充:5px 35px 5px 5px;字体大小:16px;边框:1px实心#CCC;高度:34px;-webkit外观:无;-moz外观:无;外观:无;背景:url(https://stackoverflow.com/favicon.ico)96%/15%无重复#EEE;}/*警告:Internet Explorer黑客攻击*/select::-ms扩展{显示:无;/*删除Internet Explorer 10和11中的默认箭头*/}/*以Internet Explorer 9为目标撤消自定义箭头*/@媒体屏幕和(最小宽度:0\0){选择{背景:无\9;填充:5px \9;}}<选择><option>苹果</option><option selected>菠萝</option><option>楔板</option><option>煎饼</option></选择>

这个解决方案很简单,并且具有良好的浏览器支持——通常应该足够了。


如果需要Internet Explorer的浏览器支持,请提前阅读。

解决方案#2截断select元素以隐藏默认箭头(演示)

--

(在此处阅读更多信息)

用固定宽度和溢出:hidden将select元素包装在div中。

然后给select元素的宽度比div。

结果是select元素的默认下拉箭头将被隐藏(由于溢出:隐藏在容器上),您可以在div的右侧放置任何需要的背景图像。

这种方法的优点是它是跨浏览器的(Internet Explorer 8和更高版本、WebKit和Gecko)。然而,这种方法的缺点是选项下拉列表在右侧突出(我们隐藏了20个像素……因为选项元素占用了选择元素的宽度)。

[然而,需要注意的是,如果自定义选择元素仅对移动设备是必要的,那么上述问题就不适用了,因为每个手机都是以本地方式打开选择元素的。因此,对于移动设备来说,这可能是最佳解决方案。]

.styled选择{背景:透明;宽度:150px;字体大小:16px;边框:1px实心#CCC;高度:34px;}.样式{边距:50px;宽度:120px;高度:34px;边框:1px实心#111;边界半径:3px;溢出:隐藏;背景:url(https://stackoverflow.com/favicon.ico)96%/20%无重复#EEE;}<div class=“styled”><选择><option>菠萝</option><option selected>苹果</option><option>楔板</option><option>煎饼</option></选择></div>


If the custom arrow is necessary on Firefox - prior to Version 35 - but you don't need to support old versions of Internet Explorer - then keep reading...

Solution #3 - Use the pointer-events property (demo)

--

(Read more here)

The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it.

Advantage: It works well in WebKit and Gecko. It looks good too (no jutting out option elements).

Disadvantage: Internet Explorer (Internet Explorer 10 and down) doesn't support pointer-events, which means you can't click the custom arrow. Also, another (obvious) disadvantage with this method is that you can't target your new arrow image with a hover effect or hand cursor, because we have just disabled pointer events on them!

However, with this method you can use Modernizer or conditional comments to make Internet Explorer revert to the standard built in arrow.

NB: Being that Internet Explorer 10 doesn't support conditional comments anymore: If you want to use this approach, you should probably use Modernizr. However, it is still possible to exclude the pointer-events CSS from Internet Explorer 10 with a CSS hack described here.

.notIE {
  position: relative;
  display: inline-block;
}
select {
  display: inline-block;
  height: 30px;
  width: 150px;
  outline: none;
  color: #74646E;
  border: 1px solid #C8BFC4;
  border-radius: 4px;
  box-shadow: inset 1px 1px 2px #DDD8DC;
  background: #FFF;
}
/* Select arrow styling */

.notIE .fancyArrow {
  width: 23px;
  height: 28px;
  position: absolute;
  display: inline-block;
  top: 1px;
  right: 3px;
  background: url(https://stackoverflow.com/favicon.ico) right / 90% no-repeat #FFF;
  pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/

@media screen and (min-width: 0\0) {
  .notIE .fancyArrow {
    display: none;
  }
}
<!--[if !IE]> -->
<div class="notIE">
  <!-- <![endif]-->
  <span class="fancyArrow"></span>
  <select>
    <option>Apples</option>
    <option selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
  <!--[if !IE]> -->
</div>
<!-- <![endif]-->