纯css为select加上款式(无脚本制作)完成

更改select默认设置的款式,1般情路状况下根据ul,li来仿真模拟来完成。
有许多Jquery软件便是根据这样的方法来更改select默认设置款式的。
依据程序流程哥哥那边的反应,此种方法在form递交后没法获得数据信息,后来历经试验,用了不一样的JS/Jquery软件,全是一样的結果:没法获得数据信息。

后看来1篇外国人写的 blog,用css的款式来完成 在select外面加上1个div,设定select的宽度小于父级div的宽度,随后根据设定div的background特性,更改select默认设置箭头的款式。
此种方式不失为1个好方式,不写脚本制作,只用单纯性的css来完成。

但是这类方式也是有缺陷的,便是在IE系列下,选定某个选项的情况下会有情况色块,IE7-IE10都有此bug。
在Opera下,设定div的情况图无法显示,也便是select的往下拉箭头无法显示,这个不知道道是甚么缘故引发。
下列编码

拷贝编码
编码以下:

<div class="select_style">
<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; /* Gecko browsers */
-webkit-border-radius: 5px; /* Webkit browsers */
border-radius:5px;
}
.select_style select { padding:5px; background:transparent; width:268px; font-size: 16px; border:none; height:30px;
-webkit-appearance: none; /*for Webkit browsers*/
}