当前位置:首页 > 教程 > {name} > {name} > 巧用css美化select下拉列表 更换下拉箭头

巧用css美化select下拉列表 更换下拉箭头

所属栏目:DIV+CSS技巧更新时间:2014-05-23来源:作者:deepdfhy浏览:0

使用默认的select下拉列表,右边的下拉箭头比较难看,我们可以用如下方法解决。

原 理是在select外层加入2个span,首先设置第一个span,其width大于select的width,在这个span的背景加入我们想要的下拉 箭头样式,然后再加第二个span,其width小于select的width,关键设置好它的overflow的宽度,隐藏select的下拉箭头。

优点是设置简单,缺点是若无javascript模拟鼠标点击则下拉箭头仅能起到装饰作用。

想要求漂亮而且代码的少的话,可以使用本方法。

使用到的图片:


CSS代码

.select?{?width:80px;?height:24px;?background:none;?border:none;?}?????
#sleHid?{?display:block;?width:56px;?overflow:hidden;?}?????
#sleBG??{?width:78px;?height:24px;?border:#61AC36?1px?solid;?border-right:none;??background:url("../images/common/selArr.jpg")?#fff?no-repeat?62px?1px;??display:block;}

XML/HTML代码

?????
????? ???? ???? ????? 所有分类????? 图书????? 音像????? ???? ???? ????
????

最终效果:


在IE8,FF,Safari,Opera下显示正常。

相关教程
给个评价吧