CSS3 下select下拉列表样式的修改

都知道页面中如果不给select添加样式的话，就会是系统默认的样式，如下图，很丑吧！

                             

而狠多时候我们都希望对select的样式进行修改，以使得它能够更加美观一点，在css2.0下面我们除了设置一些基本

的样式之外，是没有办法把select变的更好看的，尤其是那个很丑的下拉箭头我是没有正常的办法把它隐藏掉的。总

结了一下，更改select样式有如下几种方法：

（1）如果只是为了去掉select的下拉箭头的话，可以用css样式clip:rect(x x x x )来吧select的下拉箭头部分直接截取

        掉。但是这种方法存在的问题就是，如果设置了select的border的话，截取就会把border也截去，很是不美观。

（2）还有一种方式应该是css2.0时候用的非常多的，就是利用div+css来模拟select的界面，这种方式的优点就是可

        以制作出各种各样非常漂亮的select下拉框，但是缺点就是需要用javascript来实现select的实际功能。

（3）如果在CSS3 下要做一个稍微漂亮一点的select就相对容易了，因为CSS3下增加了border-image属性，可以设

        置边框的图片，而且这个属性对于select来说是有很大的用处的，比如下面的这个样式的select：

                             

         是不是比系统自带的select样式漂亮很多啊，而且也可以制作各种漂亮的样式，而不需要使用javascript来模拟

         select的功能，是不是很好啊！

 在使用这种方法来修改select的界面之前需要了解一下border-image.

语法：border-image：url  area type

参数：url        表示的是图片的路径

           area     表示的是图片显示的区域，下面用一张图来解释比较方便（懒得画，贴了张别人的图）

                        例如  border-image: url("bord3.png") 10 15 20 25用图来表示就是下面的这张图了

                           

                          这个东西有人说是叫九宫格，我也不太清楚是个什么东西，只是用来方便border-image的理解罢了。

                         不过也需要提醒一句的是虽然border-image: url("bord3.png") 10 15 20 25;的默认单位都是像素px，

                         但是在实际的使用中是不能带px的，可以使用百分比

           type        表示的就是一些图片显示的样式 有三个值：     stretch拉伸（默认值）repeat（重复） round（平铺）

                         表示的有两个方向：水平和垂直（顺序不要颠倒）。

                         eg:  border-image: url("bord3.png") 10 15 20 25 stretch stretch;表示的是水平和垂直方向都为拉伸 

                         关于border-image的理解我也有文章做介绍。

具体实现方法：

提供一张用于border-image的图片bord3.png

<select  id='sel'>

    <option>选项一</option> <option>选项二</option><option>选项三</option>

</select>

#sel{

      -webkit-border-radius:5px ; -moz-border-radius:5px;

     border-width:0px 21px 0px 5px;

     -webkit-border-image:url("bord3.png") 0 21 0 5;  -moz-border-image:url("bord3.png") 0 21 0 5px;

}

（4）还有一种方法也可以修改select的样式，但是仍然保留select的功能。其实这种方法也是很巧妙的，他的原理就是

        在一个链接里加入一个select下拉列表，然后设置select为透明即可，将select以透明的形式放在链接中，在点击链接

        的同时就触发了select的点击。

        实现方式：

        <a href="javascript:void(0)"  class="selOuter">

                <select  class="sel">

                    <option >选项一</option><option>选项二</option>

              </select>

       </a>

      .selOuter{position:relative;width:100px;height:35px;background:url("bord3.png");display:inline-block;}

      .selOuter select{top:0px;left:0px;position:absolute;width:100px;height:35px;opacity:0;}

     这里必不可少的就是设置外层链接a样式position:relative;因为只有外层设置了relative之后，里层的select才能以外层为基准去定位，而不是以body来定位。select必须设置的是position:absolute;top:0px;left:0px;主要的目的还是让select填充满

链接的整个区域，设置display:inline-block的目的是为了设置它的宽度，否则在非标准的状态下是不能给行内元素设置宽度和高度的。

转载于:https://www.cnblogs.com/jQing/archive/2012/12/02/2798402.html