原标题：纯css为select增加款式(无脚本)完成
改动select默许的款式，一般情路情况下经过ul,li来模仿来完成。
有许多Jquery插件便是经过这样的办法来改动select默许款式的。
依据程序哥哥那儿的反映，此种办法在form提交后无法获取数据，后来经过试验，用了不同的JS/Jquery插件，都是相同的成果：无法获取数据。
后来看一篇外国人写的 博客，用css的款式来完成 在select外面增加一个div，设置select的宽度小于父级div的宽度，然后经过设置div的background特点，改动select默许箭头的款式。
此种办法不失为一个好办法，不写脚本，只用单纯的css来完成。
不过这种办法也是有瑕疵的，便是在IE系列下，选中某个选项的时分会有背景色块，IE7-IE10都有此bug。
在Opera下，设置div的背景图不显现，也便是select的下拉箭头不显现，这个不知道是什么原因所造成的。
以下代码
仿制代码
代码如下:
<div>
<select name="select">
<option>AAAAAAAAAAA</option>
<option>BBBBBBBBBBB</option>
<option selected>CCCCCCCCCCC</option>
<option>DDDDDDDDDDD</option>
</select>
</div>
仿制代码
代码如下:
.select_style {width:240px; height:30px; overflow:hidden; background:url(../images/arrow.png) no-repeat 215px;
border:1px solid #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
}
.select_style select { padding:5px; background:transparent; width:268px; font-size: 16px; border:none; height:30px;
-webkit-appearance: none;
}
本文由建站免费资料圈sucaiq.com共享！！！
假如我们有任何疑问请给我留言，小编会及时回复我们的。在此也非常感谢我们对资料圈的支撑！若你觉得本文对你有协助，欢迎转载，烦请注明出处，谢谢！
责任编辑：
