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

2024-01-17 14:19 小编

后来看一篇外国人写的博客，用css的样式来实现在select外面添加一个div，设置select的宽度小于父级div的宽度，然后通过设置div的background属性，改变select默认箭头的样式。此种方法不失为一个好方法，不写脚本，只用单纯的css来实现。

不过这种方法也是有瑕疵的，就是在IE系列下，选中某个选项的时候会有背景色块，IE7-IE10都有此bug。

在Opera下，设置div的背景图不显示，也就是select的下拉箭头不显示，这个不知道是什么原因所致。

html代码：

<divclass="select_style">

<selectname="select">

<option>AAAAAAAAAAA</option>

<option>BBBBBBBBBBB</option>

<optionselected>CCCCCCCCCCC</option>

<option>DDDDDDDDDDD</option>

</select>

</div>

CSS代码：

.select_style{width:240px;height:30px;overflow:hidden;background:url(../images/arrow.png)no-repeat215px;

border:1pxsolid#ccc;

-moz-border-radius:5px;/*Geckobrowsers*/

-webkit-border-radius:5px;/*Webkitbrowsers*/

border-radius:5px;

}

.select_styleselect{padding:5px;background:transparent;width:268px;font-size:16px;border:none;height:30px;

-webkit-appearance:none;/*forWebkitbrowsers*/

}

联络方式：

微信二维码

您感兴趣的内容