去掉或者修改 input、select 等表单的【默认样式 】
隐藏input等表单的默认样式的背景：
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的目的是为了设置它的宽度，否则在非标准的状态下是不能给行内元素设置宽度和高度的。
