小编典典

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

php

是否有仅CSS方式来设置<select>下拉菜单样式?

我需要在<select>不使用任何JavaScript的情况下尽可能地样式化表单。我可以在CSS中使用哪些属性?

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

  • Internet Explorer 6, 7, and 8
  • Firefox
  • Safari

我知道我可以使用JavaScript实现:Example。

我不是在谈论简单的样式。我想知道,仅CSS可以做得最好。

我在堆栈溢出中发现了类似的问题。

而这个在Doctype.com上。


阅读 651

收藏
2020-05-13

共1个答案

小编典典

这是三个解决方案:

解决方案#1-外观:无-使用Internet Explorer 10-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)-Internet Explorer 11(及更高版本)和Firefox 34(及更高版本)除外。

我们可以改进此技术,并通过添加以下内容来添加对Internet Explorer 10和Internet Explorer 11的支持:

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;
    }
}

全部一起:

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: Internet Explorer hackery ahead */


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

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background: none\9;
        padding: 5px\9;
    }
}
<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

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

如果需要浏览器支持Internet Explorer 9(及更高版本)和Firefox 34(及更高版本),请继续阅读…

解决方案#2截断选择元素以隐藏默认箭头(demo)

select用固定宽度和的div 将元素包装overflow:hidden。

然后给select元素一个比div大20像素的宽度。

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

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

[然而,应该注意的是,如果自定义选择元素仅对于移动设备是必需的,那么上述问题就不适用,因为每部电话都会以本机方式打开选择元素。因此,对于移动设备,这可能是最好的解决方案。]

.styled select {
  background: transparent;
  width: 150px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
}
.styled {
  margin: 50px;
  width: 120px;
  height: 34px;
  border: 1px solid #111;
  border-radius: 3px;
  overflow: hidden;
  background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #EEE;
}
<div class="styled">
  <select>
    <option>Pineapples</option>
    <option selected>Apples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
</div>

如果在Firefox(版本35之前)上需要自定义箭头,但您不需要支持旧版本的Internet Explorer,则请继续阅读…

解决方案#3-使用pointer-events属性(demo)

这里的想法是在本地下拉箭头上覆盖一个元素(以创建我们的自定义箭头),然后在其上禁止指针事件。

优点:它在WebKit和Gecko中运行良好。看起来也不错(没有突出option元素)。

缺点: Internet Explorer(Internet Explorer 10及更低版本)不支持pointer-events,这意味着您无法单击自定义箭头。另外,此方法的另一个(明显)缺点是您不能用悬停效果或手形光标作为新箭头图像的目标,因为我们刚刚禁用了它们的指针事件!

但是,通过这种方法,您可以使用Modernizer或条件注释使Internet Explorer恢复为内置的标准箭头。

注意: Internet Explorer 10不再受支持conditional comments:如果要使用此方法,则可能应该使用Modernizr。但是,仍然可以通过此处描述的CSS hack从Internet Explorer 10中排除指针事件CSS 。

.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(http://www.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]-->
2020-05-13