css修改selec下拉菜单样式|三体教程
文章目录

css修改selec下拉菜单样式

修改select下拉菜单样式其实可以使用javascript来操作,这样更方便。

但有些人并不喜欢,想用单纯的css来控制。

以下有三种解决方案,看看哪一个合适。

解决方案1 外观:无 - 与ie10-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有非常好的浏览器支持ie11和firefox34除外

我们可以通过增加这个技术来增加对ie10和ie11的支持

select::-ms-expand {
    display: none; /* hide the default arrow in ie10 and ie11 */
}

如果是ie9,那又是一个问题,我们没有办法去除默认箭头(这意味着我们现在有两个箭头)。

但是,我们可以使用时髦的ie9选择器来至少撤销我们的自定义箭头——保留默认选择箭头。

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

完整代码如下:

html代码<style>
  select {
   margin: 50px;
   border: 1px solid #111;
   background: transparent;
   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: IE hackery ahead */
  
  
  select::-ms-expand { 
     display: none; /* remove default arrow in IE 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;
     }
  }
  </style>
  <select>
   <option>Apples</option>
   <option selected>Pineapples</option>
   <option>Chocklate</option>
   <option>Pancakes</option>
  </select>

亲自测试一下

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

如果浏览器支持IE9和Firefox 34是必要的,那么继续往下看。

解决方案2 截断select元素以隐藏默认箭头

将select用一个div元素包裹起来,给一个固定的宽度和高度,并使用overflow:hidden

然后将select元素的宽度设为比div大20个像素。

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

这种方法的优点是它是跨浏览器(Internet Explorer 8及更高版本,WebKit和Gecko)。

然而,这种方法的缺点是选项下拉列表在右侧(通过我们隐藏的20个像素...因为选项元素占据了选择元素的宽度)。

但是,应该注意的是,如果自定义选择元素仅用于移动设备,则上述问题不适用 。

完整代码如下:

html代码<style>
  .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;
  }
  </style>
  <div class="styled">
   <select>
     <option>Pineapples</option>
     <option selected>Apples</option>
     <option>Chocklate</option>
     <option>Pancakes</option>
   </select>
  </div>

亲自测试一下

如果自定义箭头一定要用在firefox上面,并且在在35版本之前,但是您又不需要支持IE的旧版本,那么请继续往下看。

解决方案3 使用pointer-events属性

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

优点:适用于WebKit和Gecko。它看起来也不错(没有突出的option元素)

缺点: Internet Explorer(IE10和以下)不支持pointer-events,这意味着你不能点击自定义箭头。

此外,这种方法的另一个(显而易见的)缺点是,您不能使用悬停效果或手形光标来定位您的新箭头图像,因为我们刚刚禁用了指针事件!

完整代码如下:

html代码<style>
  .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;
   }
  }
  </style>
  <!--[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]-->

亲自测试一下

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

注意:因为Internet Explorer 10不再支持conditional comments:如果你想使用这种方法,你应该使用Modernizr。

但是,仍然可以使用这里描述的CSS hack从Internet Explorer 10中排除指针事件CSS 。

本文网址:http://www.santii.com/article/186.html


数据更新时间:2018-05-25