巧用css美化select下拉列表 更换下拉箭头
所属栏目：常用CSS技巧 时间：2014-05-23 来源：网络 作者：不详 点击： 9912
使用默认的select下拉列表，右边的下拉箭头比较难看，我们可以用如下方法解决。
原 理是在select外层加入2个span，首先设置第一个span，其width大于select的width，在这个span的背景加入我们想要的下拉 箭头样式，然后再加第二个span，其width小于select的width，关键设置好它的overflow的宽度，隐藏select的下拉箭头。
优点是设置简单，缺点是若无javascript模拟鼠标点击则下拉箭头仅能起到装饰作用。
想要求漂亮而且代码的少的话，可以使用本方法。
使用到的图片：
| 1 2 3 |
.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代码
| 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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>
|
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： css美化下拉框select
- 下一篇： 纯css修改下拉列表select的默认样式
