<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>一款DIV+CSS+JS模拟的select下拉框丨芯晴网页特效丨CsrCode.Cn</title>
<script type="text/javascript" >
function getElement(_sId){
?return document.getElementById(_sId);
?}
function hide(_sId)
?{
?var obj = getElement(_sId);
?? getElement('HMF-1').style.display = getElement('HMF-1').style.display == "none" ? "" : "none";
?? getElement('HMF-1').style.position="absolute";
?
?}
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">
body{font-family: Arial, Helvetica, sans-serif;font-size: 12px;}
.cur{cursor:pointer; display:block;color:#FF0000;width:80px; height:22px; line-height:22px; padding:0px 0px 0px 2px;}
.am{border: 0px;color:#FF0000;cursor: pointer;background:#fff url('0.gif') no-repeat; width: 150px;height: 19px;margin:10px 0px 0px 10px; padding:3px 0px 0px 2px;}
.bm{border: 1px #999999 solid ;width: 80px;}
</style>
</head>
<body>
<br><br>点击下面按钮查看预览效果：
<form>
<tr>
??? <input style="width:75px" onclick="hide('am')" type="text" value="0" id="am" /><br/>
</tr>
?
<div id="HMF-1" style="display: none " class="bm">
?<span id="a0" onclick="pick('0')" onMouseOver="bgcolor('a0')" onMouseOut="nocolor('a0')" class="cur">0</span>
?<span id="a1" onclick="pick('1')" onMouseOver="bgcolor('a1')" onMouseOut="nocolor('a1')" class="cur">1</span>
?<span id="a2" onclick="pick('2')" onMouseOver="bgcolor('a2')" onMouseOut="nocolor('a2')" class="cur">2</span>
?<span id="a3" onclick="pick('3')" onMouseOver="bgcolor('a3')" onMouseOut="nocolor('a3')" class="cur">3</span>
?<span id="a4" onclick="pick('4')" onMouseOver="bgcolor('a4')" onMouseOut="nocolor('a4')" class="cur">4</span>
?<span id="a5" onclick="pick('5')" onMouseOver="bgcolor('a5')" onMouseOut="nocolor('a5')" class="cur">5</span>
?<span id="a6" onclick="pick('6')" onMouseOver="bgcolor('a6')" onMouseOut="nocolor('a6')" class="cur">6</span>
?<span id="a7" onclick="pick('7')" onMouseOver="bgcolor('a7')" onMouseOut="nocolor('a7')" class="cur">7</span>
?<span id="a8" onclick="pick('8')" onMouseOver="bgcolor('a8')" onMouseOut="nocolor('a8')" class="cur">8</span>
?<span id="a9" onclick="pick('9')" onMouseOver="bgcolor('a9')" onMouseOut="nocolor('a9')" class="cur">9</span>
</div>
?
</form>
</body>
</html>
?