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

dIV+CSS+JS仿的兼容性很好的下拉选择表单

2015-01-19 15:06 323 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV+CSS+JS仿的兼容性很好的下拉选择表单丨河北金邦子锅炉</title>
<script type="text/javascript" >
function $$$$$(_sId){
return document.getElementById(_sId);
}
function hide(_sId)
{$$$$$(_sId).style.display = $$$$$(_sId).style.display == "none" ? "" : "none";}
function pick(v) {
document.getElementById('am').value=v;
hide('HMF-1')
}
function bgcolor(id){
document.getElementById(id).style.background="#F7FFFA";
document.getElementById(id).style.color="#000";
}
function nocolor(id){
document.getElementById(id).style.background="";
document.getElementById(id).style.color="#788F72";
}
</script>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.cur {
cursor:pointer;
display:block;
color:#788F72;
width:71px;
height:22px;
line-height:22px;
padding:0px 0px 0px 2px;
}
.am {
border: 0px;
color:#788F72;
cursor: pointer;
background: url(/images/bg_gblue.gif)  center center;
border:1px #ccc solid;
display:block;
cursor:pointer;
width:73px;
height: 19px;
margin:10px 0px 0px 10px;
padding:3px 0px 0px 2px;
}
.bm {
border: 1px #999999 solid;
width:73px;
margin-left:10px;
}
</style>
</head>
<body>
<form>
<input onclick="hide('HMF-1')" type="text" value="请选择" id="am" class="am" />
<div id="HMF-1" style="display: none " class="bm"> <span id="a1" onclick="pick('测试一')" onMouseOver="bgcolor('a1')" onMouseOut="nocolor('a1')" class="cur">测试一</span> <span id="a2" onclick="pick('测试二')" onMouseOver="bgcolor('a2')" onMouseOut="nocolor('a2')" class="cur">测试二</span> <span id="a3" onclick="pick('测试三')" onMouseOver="bgcolor('a3')" onMouseOut="nocolor('a3')" class="cur">测试三</span> <span id="a4" onclick="pick('测试四')" onMouseOver="bgcolor('a4')" onMouseOut="nocolor('a4')" class="cur">测试四</span> <span id="a5" onclick="pick('测试五')" onMouseOver="bgcolor('a5')" onMouseOut="nocolor('a5')" class="cur">测试五</span> <span id="a6" onclick="pick('测试六')" onMouseOver="bgcolor('a6')" onMouseOut="nocolor('a6')" class="cur">测试六</span> </div>
</form>
</body>
</html>
<br>点击上面的按钮查看预览效果<br>DIV+CSS+JS仿Select下拉表单，兼容IE全系列，火狐，谷歌，open等浏览器。是个不错的Select表单美化参考实例。代码内用到一张背景图片，请自行下载。<hr>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航