纯css为select添加样式(无脚本)实现

改变Select默认样式的方式有多种，其中通过模拟使用ul和li元素的方式比较常见，很多Jquery插件也采用这种方式。在实际使用过程中，一些开发者发现这种方式在表单提交后无法获取数据。尝试使用不同的JS/Jquery插件也未能解决问题。

后来，一种新方法受到关注，即通过CSS样式来改变Select的默认样式。具体做法是在Select元素外部添加一个div，并设置Select的宽度小于父级div的宽度。然后，利用div的background属性改变Select默认箭头的样式。这种方法无需编写脚本，仅使用纯CSS即可实现。

这种方法也存在一些瑕疵。在IE系列浏览器中，当选中的选项时会出现背景色块，这一bug在IE7至IE10中均存在。在Opera浏览器中，设置的div背景图不显示，即Select的下拉箭头无法显示。目前尚不清楚导致此问题的具体原因。

以下是使用该方法的具体代码示例：

HTML代码：

```html

```

CSS代码：

```css

.select_style {

width: 240px;

height: 30px;

overflow: hidden;

background: url(../images/arrow.png) no-repeat 215px;

border: 1px solid ccc;

border-radius: 5px; / 添加圆角边框 /

}

.select_style select {

padding: 5px;

background: transparent;

width: 268px;

font-size: 16px;

border: none;

height: 30px;

-webkit-appearance: none; / 移除Webkit默认外观 /

}

```

尽管这种方法有其优点和缺点，但它为开发者提供了一种新的选择，可以根据实际需求选择使用。在实际应用中，可能还需要针对各种浏览器进行兼容性调整和优化。以上代码仅供参考和学习交流之用。