巧用css美化select下拉列表 更换下拉箭头
来源:wordpress
作者:
2020-06-09
使用默认的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代码
<div> <form> <span id="sleBG"> <span id="sleHid"> <select name="type" class="select"> <option selected="selected">所有分类</option> <option value="1">图书</option> <option value="2">音像</option> </select> </span> </span> </form> </div>
最终效果:
在IE8,FF,Safari,Opera下显示正常。