去掉或者修改 input、select 等表单的【默认样式 】

textarea,select,input{-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;}

 

让div看起来像按钮：

div
{
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari 和 Chrome */
}

 

使用css打造自定义select(非模拟)实现原理及样式

 

 点评：使用appearance:none去除select的默认样式，配合使用gradient、background-size,background-position,拼出自定义的样式，大家可以发挥想象力做出绚丽的select 实现原理很简单： 
1，使用appearance:none去除select的默认样式； 
2，配合使用gradient、background-size,background-position,拼出自定义的样式 
我定义的样式和浏览器默认给出的样式没多大差别，主要是简单实现一下，大家可以发挥想象力做出绚丽的select。 

实现css如下： 

　　代码如下:

　　select{ 
margin: 0; 
padding: 0; 
outline: none; 
height: 25px; 
line-height: 25px; 
width: 120px; 
border: rgb(191, 204, 220) 1px solid; 
border-radius: 3px; 
display: inline-block; 
font: normal 12px/25px "微软雅黑", "SimSun", "宋体", "Arial"; 
background-size: 5px 5px,5px 5px,25px 25px,1px 25px; 
 
background-image: repeating-linear-gradient(225deg,rgb(105,123,149) 0%,rgb(105,123,149) 50%,transparent 50%,transparent 100%), 
repeating-linear-gradient(135deg,rgb(105,123,149) 0%,rgb(105,123,149) 50%,transparent 50%,transparent 100%), 
linear-gradient( #FFFFFF 0%,#F8F9Fd, #EFFAFA 100%), 
repeating-linear-gradient( rgb(191, 204, 220) 0%,rgb(191, 204, 220) 100%); 
background-repeat: no-repeat; 
background-position: 101px 10px,106px 10px,right top,92px top; 
-webkit-appearance: none 

 

 

 

更改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的目的是为了设置它的宽度，否则在非标准的状态下是不能给行内元素设置宽度和高度的。