您的位置:首页 > Web前端 > CSS

修改select样式

2016-03-29 11:40 615 查看
//下拉列表
var sel =  document.getElementsByTagName("select") ;
for (i = 0, j = sel.length; i < j; i++) {
sel[i].addEventListener("change",function(){
this.previousSibling.textContent = $(this).find("option:selected").text();
});
}
 <div class=box2><span></span><select><option value="" selected>10年</option><option value="">5年</option><option value="">20年</option><option value="">30年</option></select><span class="select-tb"></span></div>
.box2{ border: 1px solid #CCCCCC; height: 37px;clip: rect(0px,179px,16px,0px);overflow: hidden;background-color: #f7f7f7;display: inline-block; line-height: 37px; position: relative; width: 200px;font-size: 20px;} .box2 span:first-child{display: inline-block;width: 150px;position: absolute;}select{opacity: 0; font-size: 20px; width: 200px; height: 37px;border: 0px;  z-index: 10; position: absolute;left: 0px;} .select-tb{background: url("../images/zc-search.png") no-repeat; width: 37px;height: 37px;display: inline-block;margin-left: 163px;}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: