巧用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代码

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

收藏 0 有帮助 0 没帮助 0 打赏 0
相关教程
给个评价吧
领航时时彩软件 幸运飞艇官方网站开奖号码 老快3预测 股票模拟训练软件 北京体彩11选5100期走势图 香港资料免费资料大全 大地棋牌官网下载安装 山东十一选五开奖走势图 财云配资 好运彩107 德甲积分榜2016 2017 微乐贵阳麻将官方免费 天津快乐10分怎么玩 黑龙江36选7开奖信息 甘肃快三开始销售时间 紫幻河南麻将游戏 北京pk10软件免费