改变select默认样式(纯css实现)

我们所熟知的改变select默认的样式的方法，大多都是通过ul,li模拟实现的。
也有一些jquery插件是能过这样的方式来改变select默认样式的，此种方式在form提交后无法获取数据。

用纯css的方法来实现，在select外面添加一个div，设置select的宽度小于父级div的宽度，然后通过设置div的background属性，改变select默认箭头的样式。

此方法也有个问题：在IE系列下，选中某个选项的时候会有背景色块，IE7-IE10都有此bug。
在Opera下，设置div的背景图不显示，select的下拉箭头不显示。

html内容：

<div class="select_style">
<select name="select">
<option>11111111111111</option>
<option>22222222222222222</option>
<option selected>2b2bb2b2b2b2b22</option>
<option>fffffffffffffffffffff</option>
</select>
</div>

css代码：

.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*/
}

以上代码供大家学习研究之用，哪位有更好的方法，欢迎交流沟通。