HTML <select> 標簽的美化
阿新 • • 發佈：2017-09-30
效果 水果 his shadow don har padding oca listen
閑得慌，就想著能不能把SELECT標簽美化一下。。但是貌似不行啊。。
沒辦法，自己造了個輪子。。
顯示效果：
HTML代碼：
<html>
<meta charset="utf8">
<head>
<title>Select</title>
<style type="text/css">
body{font-size:14px;font-family:airal,‘Microsoft YaHei‘,\5FAE\8F6F\96C5\9ED1}
#select{
width: 100px;
height: 32px;
border: 1px solid #eee;
background: #fff;
text-align: center;
line-height: 32px;
padding: 3px;
position: absolute;
top: 100px;
left: 20px;
color: #333;
border-radius: 3px;
cursor: pointer;
user-select:none;
}
#option{transition: 0.3s;display:none;height:auto; padding: 0px; background:#fff; color: #333;box-shadow:0px 0px 8px #ccc;position:absolute;top:43px;left:0;width:100%;}
#option a{text-decoration:none;color:#333;display:block;width:100px;padding:3px 3px;transition:0.4s;cursor:default}
#option a:hover{background:#4281F4;color:#fff}
#dis-inp{position:absolute;top:100px;left:220px;}
#dis-inp input{width:123px;height:32px;border:1px solid #eee;box-shadow:0px 0px 8px #eee;padding:3px 12px;}
</style>
</head>
<body>
<div id="select" onclick="dis()" >
<span id="choies" local-value="">選擇水果</span><!--span>▼</span-->
<div id="option">
<a href="javascript:void(0)" local-value="apple" >蘋果</a>
<a href="javascript:void(0)" local-value="plum" >李子</a>
<a href="javascript:void(0)" local-value="Grape" >葡萄</a>
<a href="javascript:void(0)" local-value="watermelon">西瓜</a>
<a href="javascript:void(0)" local-value="">請選擇</a>
</div>
</div>
<!---div id="dis-inp">
<input type="text" readonly="readonly" id="ch">
</div-->
<script type="text/javascript">
var isdown=false;
var se = document.getElementById("select");
var op = document.getElementById("option");
var a = op.getElementsByTagName("a");
var chte=document.getElementById("choies");
for(i=0;i<a.length;i++){
a[i].addEventListener("click",function(){
chte.innerText=this.text;
chte.setAttribute("local-value",(this.getAttribute("local-value")));
})
}
function dis(){
if(!isdown){
op.style.display="block";
//op.style.height="auto";
isdown=true;
}else{
op.style.display="none";
//op.style.height="0px";
isdown=false;
}
}
</script>
</body>
</html>
HTML <select> 標簽的美化