HTML表单美化之下拉列表
由于一些系统原生的表单控件在各个浏览器中显示效果不一致，且无法设置某些关键CSS样式，为了保证表单在各浏览器中的兼容性，表单美化就是不得不做的一件事了
【实现过程】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
margin: 0;
font: 16px/20px "宋体";
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.box{
width: 300px;
height: 40px;
margin: 0 auto;
border: 1px solid black;
}
.box .show{
background-color: red;
line-height: 30px;
padding: 5px;
}
.box .show-area{
color: white;
vertical-align: middle;
}
.box .show-select{
position: relative;
display: inline-block;
vertical-align: middle;
width: 200px;
height: 28px;
border: 1px solid #999;
background-color: white;
text-indent: 20px;
cursor: pointer;
}
.box .show-selectAdd{
color: #999;
}
.box .show-select i{
position: absolute;
height: 0;
width: 0;
top: 0;
right: 0;
margin-top: 12px;
margin-right: 5px;
border: 5px solid transparent;
border-top-color: black;
}
.box .show-selectAdd i{
border: 5px solid transparent;
border-bottom-color: black;
margin-top: 8px;
}
.box .list{
border: 1px solid #dfdfdf;
border-top: none;
display: none;
}
.box .list-in{
height: 30px;
line-height: 30px;
text-indent: 74px;
border-bottom: 1px solid #dfdfdf;
cursor: pointer;
}
.box .list-in:hover{
color: red;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="show">
<strong class="show-area">首页:</strong>
<span class="show-select">Html/Css<i></i></span>
</div>
<ul class="list">
<li class="list-in">JavaScript</li>
<li class="list-in">jQuery</li>
<li class="list-in">PHP</li>
<li class="list-in">相关其它</li>
<li class="list-in">随笔杂谈</li>
</ul>
</div>
<script>
var oBox = document.getElementById('box');
var oDiv = oBox.getElementsByTagName('div')[0];
var oShow = oDiv.getElementsByTagName('span')[0];
var oUl = oBox.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
//简单思路
//[1]点击oDiv时，默认文字为黑色，三角向上，变成文字为#999，三角向下；简化为增加一个show-selectAdd类名；oUl从隐藏变成显示
oDiv.onclick = function(e){
//阻止冒泡
e = e || event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
oShow.className = 'show-select show-selectAdd';
oUl.style.display = 'block';
}
//[2]点击oUl的li时，oUl从隐藏变成显示，文字和三角恢复到黑色和向上的默认样式；并且文字内容变成当前点击的li的内容
for(var i = 0,len=aLi.length; i < len;i++){
aLi[i].onclick = function(){
oShow.innerHTML = this.innerHTML + '<i></i>';
}
}
//[3]点击box以外的其他部分时，oUl从隐藏变成显示，文字和三角恢复到黑色和向上的默认样式
document.onclick = function(){
this.getElementsByTagName('span')[0].className = 'show-select';
oUl.style.display = 'none';
}
</script>
</body>
</html>
原文链接：https://www.qiquanji.com/post/7062.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
