css美化select下拉列表(更换下拉箭头)的方法

http://www.jbxue.com/article/14362.html

本文介绍下，使用css美化select下拉列表样式的方法，更换下拉箭头的方法分享，有需要的朋友参考下。

本节内容：

css更换select下拉箭头

使用默认的select下拉列表，右边的下拉箭头很不美观。

原理分析：

在select外层加入2个span，首先设置第一个span，其width大于select的width，在这个span的背景加入想要的下拉箭头样式。

然后，再加第二个span，其width小于select的width，关键设置好它的overflow的宽度，隐藏select的下拉箭头。

优点：设置简单。

缺点：若无javascript模拟鼠标点击则下拉箭头仅能起到装饰作用。

1，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;}

2，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下显示正常。

实现方法：

第二步：添加第二个span，id是sleHid，这个span是将表单中的select隐藏起来，注意设置好宽度，这是关键。

第三步：为2个span写好样式，测试在不同浏览器里的兼容性。