select框默认样式去除（ie中隐藏默认下拉图标）

最新推荐文章于 2022-10-20 12:04:19 发布

转载最新推荐文章于 2022-10-20 12:04:19 发布 · 851 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/vanstrict/p/4979934.html

本文介绍如何使用CSS清除默认的select选择框样式，并通过背景图片实现自定义下拉箭头，适用于IE和其他现代浏览器。

html代码

1  <select class="info-select">
2        <option selected="selected">1</option>
3        <option>2</option>
4  </select>

css代码

 /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
          select::-ms-expand { display: none; }          
         .info-select{
            width: 12%;
            margin-left: 64%;
            border: none;
            outline: none;
            /*将默认的select选择框样式清除*/
            appearance:none;
            -moz-appearance:none;
            -webkit-appearance:none;
            -ms-appearance:none;
           /*在选择框的最右侧中间显示小箭头图片*/
           background: url(../img/arrow.png) no-repeat scroll right center transparent;           
         }