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,我们将及时处理。
微信扫码关注
更新实时通知