首页 > 代码库 > select样式美化（简单实用）
select样式美化（简单实用）
美化select，可以实用一个a标签将select嵌套进去，然后将<a>相对定位，在将select绝对定位，美化<a>即可
文件下载链接：https://i.cnblogs.com/Files.aspx 下面的select美化.zip。
<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="http://www.mamicode.com/jquery.js"></script>
<style>
.sel_mask{ /*将<a></a>相对定位*/
position:relative;
width:200px;
height:25px;
background:#24A0D8;
border-radius: 5px;
box-shadow:1px 1px 5px #169BD5;
display:inline-block;
text-decoration: none;
}
.sel_mask:hover{ /*添加hover效果*/
background:#169BD5;
}
.sel_mask select{ /*以相同大小将<select></select>绝对定位*/
top:0px;
left:0px;
position:absolute;
width:200px;
height:25px;
opacity:0;
}
.sel_mask select option[selected]{
font-weight:bold
}
.sel_mask select option:nth-child(even) {
background-color:#A7DAEF;
}
.sel_mask select option{
color:#EA5400;
}
.sel_mask span{ /*显示内容*/
position: absolute;
top:3px;
left:5px;
right: 20px;
display: inline-block;
color:#fff;
overflow:hidden;
text-overflow: ellipsis;
white-space:nowrap;
}
.sel_mask img{ /*箭头图标*/
display: inline-block;
position: absolute;
top:2px;
right: 5px;
}
</style>
</head>
<body>
<a href="javascript:void(0)" class="sel_mask"><span>请选择</span><img src="http://www.mamicode.com/arrow_down.png"/>
<select class="sel">
<option>请选择</option>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
<option>选项四</option>
<option>选项五</option>
<option>选项六</option>
<option>选项七</option>
</select>
</a>
<script>
$(function () {
$(‘.sel‘).change(function () { // 选择后替换内容并恢复箭头方向
$(‘span‘).html($(‘.sel‘).find(‘option:selected‘).html());
$(‘.sel_mask‘).find(‘img‘).attr(‘src‘,‘arrow_down.png‘);
})
$(‘.sel‘).blur(function () { //什么也不选恢复箭头方向
$(‘.sel_mask‘).find(‘img‘).attr(‘src‘,‘arrow_down.png‘);
})
$(‘.sel‘).click(function(){ // 点击后更改箭头方向
$(‘.sel_mask‘).find(‘img‘).attr(‘src‘,‘arrow_up.png‘);
})
})
</script>
</body>
</html>
select样式美化（简单实用）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。