用JavaScript美化select样式

王朝html/css/js·作者佚名 2006-07-21

原文出处：http://www.nbb.cc/78/2006/05/javascriptselect_1.html

如图代码来自yahoo

上网查找很多表单中 select 美化的代码，都没有合适的，偶尔有也不是很舒服只能在IE里面正常显示。看到 yahoo 上的代码在 FireFox下面也能正常显示，而且非常漂亮，所以花了点时间把它Copy下来呵呵，给大家分享。

代码实现原理用隐藏的input来代替select，然后用另外一个只读input来显示select的框,用图片来表示下拉箭头，用层来显示下拉列表，用javascript把下拉列表里面a的name的值赋给隐藏的input和只读的input，最终实现虚拟select的效果。

这样做不但多种浏览器支持，而且很方便对外观做美化，列表里面自由灵活的布局。

代码如下：

1.<link href="Css/Select.css" rel="stylesheet" type="text/css" /> Css样式表对我们虚拟出来的Select做美化

2.<script language="JavaScript" type="text/javascript" src="Js/Select.js"></script> 实现功能的主要JS

3.HTML代码以及如何调用

</div>

</table>

</div>

var e_dengji = new htmlElementSelect('add_composition', 'dengji_c', 'dengji', 'list_dengji');

</script>

</form>

以下是Select.css代码(点击下载)：

/* CSS Document */

.selectControlOption{display:none;}

.selectDownList a:link,.selectDownList a:visited{font-size:12px;display:block;width:100%;text-decoration:none;color:#000;}

.selectDownList a:hover,.selectDownList a:active{

font-size:12px;

display:block;

width:100%;

text-decoration:none;

color:#fff;

background-color: #6699FF;

}

.selectControlBtn,.selectBtnover,.selectBtnclick{cursor:pointer;_cursor /* */:hand;}

.selectControlBtn{position:absolute;width:16px;height:20px;overflow:hidden;background:url(../Img/Select_btn.gif) no-repeat;top:0;_top:1px;}

.selectControl{position:relative;}

.clsInput{border:1px solid #2f6bc1 !important;font-size:12px !important;padding:.2em .1em .15em .1em; _height /* */:20px;}

.selectBtnover{background:url(../Img/Select_btnover.gif) no-repeat;}

.selectBtnclick{background:url(../Img/Select_btnclk.gif) no-repeat;}

.selectDownList{

position:absolute;

overflow:auto;

background:#fff;

z-index:100;

border: 1px solid #99CCFF;

}

.selectCurStatus {color:#ff0000;}

以下是Select.js代码(点击下载)：

[code]var htmlElementSelectManager={lastSelectElement:null,lastSelectIframeElement:null};function htmlElementSelect(frmName,inpName,valName,lstId){this.init(frmName,inpName,valName,lstId);}

htmlElementSelect.prototype.version="0.1.2";htmlElementSelect.prototype.parentForm=null;htmlElementSelect.prototype.self=null;htmlElementSelect.prototype.saveValue=null;htmlElementSelect.prototype.selectButton=null;htmlElementSelect.prototype.listContent=null;htmlElementSelect.prototype.dropDownList="";htmlElementSelect.prototype.relationControl=null;htmlElementSelect.prototype.init=function(frmName,inpName,valName,lstId){var that=this;if(!document.forms[frmName]||!document.forms[frmName].elements[inpName]||!document.forms[frmName].elements[valName]||!document.getElementById(lstId))return false;this.listContent=document.getElementById(lstId);this.parentForm=document.forms[frmName];this.self=document.forms[frmName].elements[inpName];this.saveValue=document.forms[frmName].elements[valName];var divp=this.self.parentNode;if(!divp)return false;this.self.className="clsInput";divp.style.width=this.self.offsetWidth+"px";divp.style.height=this.self.offsetHeight+"px";var downBtn=document.createElement("div");downBtn.className='selectControlBtn';downBtn.style.right="-15px";divp.appendChild(downBtn);this.selectButton=downBtn;var lstdiv=document.createElement("div");lstdiv.className="selectDownList";lstdiv.id=frmName+"_"+inpName+"_downlistId";lstdiv.style.display="none";this.dropDownList=lstdiv.id;divp.appendChild(lstdiv);var lstifrm=document.createElement("iframe");lstifrm.id=lstdiv.id+"_ifrm";lstifrm.zIndex=parseInt(lstdiv.style.zIndex)-1;lstifrm.style.display="none";lstifrm.frameBorder=0;lstifrm.style.position="absolute";lstifrm.style.filter="alpha(opacity:0)";lstifrm.style.background="transparent";lstifrm.scrolling="no";divp.appendChild(lstifrm);downBtn.onmouseover=function(){that.handleOverBtn(that);}

downBtn.onmouseup=function(){that.handleOverBtn(that);}

downBtn.onmouseout=function(e){that.handleOutBtn(that,e);}

downBtn.onmousedown=function(){that.handleClickBtn(that);}

this.self.onclick=downBtn.onmousedown;this.self.onmouseout=downBtn.onmouseout;this.self.onmouseover=downBtn.onmouseover;downBtn=null;};htmlElementSelect.prototype.handleOverBtn=function(o){o.selectButton.className="selectControlBtn selectBtnover";};htmlElementSelect.prototype.handleOutBtn=function(o,e){o.selectButton.className="selectControlBtn";};htmlElementSelect.prototype.handleClickBtn=function(o){var downlstfrm=document.getElementById(o.dropDownList+"_ifrm");var downlst=document.getElementById(o.dropDownList);var selectmgr=htmlElementSelectManager;if(selectmgr.lastSelectElement!=null&&selectmgr.lastSelectElement!=downlst){selectmgr.lastSelectElement.style.display="none";selectmgr.lastSelectIframeElement.style.display="none";}

selectmgr.lastSelectElement=downlst;selectmgr.lastSelectIframeElement=downlstfrm;downlst.parentNode.style.zIndex=100;o.selectButton.className="selectControlBtn selectBtnclick";downlst.style.width=(o.listContent.style.width==""||parseInt(o.listContent.style.width.replace("px",""))<o.self.offsetWidth+15)?(o.self.offsetWidth+15)+"px":o.listContent.style.width;downlst.style.height=(o.listContent.style.height=="")?"200px":o.listContent.style.height;if(o.listContent.innerHTML==""){downlst.style.height="20px";downlst.style.width=(o.self.offsetWidth+18)+"px"}

downlstfrm.style.width=downlst.style.width;downlstfrm.style.height=downlst.style.height;var direc=o.showDirection(o,[downlst.style.width.replace("px",""),downlst.style.height.replace("px",""),o.self.parentNode.offsetLeft,o.self.parentNode.offsetTop,o.self.offsetHeight]);if(direc[0]=='left'){downlst.style.left=0;downlstfrm.style.left=0;}else if(direc[0]=='right'){downlst.style.right="-16px";downlstfrm.style.right="-16px";}

if(direc[1]=='down'){downlst.style.top=o.self.offsetHeight+"px";downlstfrm.style.top=o.self.offsetHeight+"px";}else if(direc[1]=='up'){downlst.style.top="-"+(parseInt(downlst.style.height.replace("px",""))-1)+"px";downlstfrm.style.top="-"+(parseInt(downlst.style.height.replace("px",""))-1)+"px";}

downlst.style.display=(downlst.style.display=="block")?"none":"block";downlstfrm.style.display=downlst.style.display;downlst.innerHTML=o.listContent.innerHTML;if(downlst.style.display=="block"){var itms=downlst.getElementsByTagName("a");for(var i=0;i<itms.length;i++){itms[i].onclick=function(){o.handleSetValue(o,this);downlst.style.display="none";o.changeListContentState(o,this.name);downlstfrm.style.display="none";return false;}}

itms=null;var mout=function(e){o.selectButton.className="selectControlBtn";if(!e)var e=window.event;if(e.relatedTarget){var relTarget=e.relatedTarget;}else{var relTarget=e.toElement;}

if(!relTarget)return;try{if(relTarget.tagName.toLowerCase()=="html"||relTarget.tagName.toLowerCase()=="body"){downlst.style.display="none";downlstfrm.style.display="none";downlst.parentNode.style.zIndex=0;}else if(o.isInTarget(relTarget,o.dropDownList)){downlst.style.display="block";downlstfrm.style.display="block";downlst.parentNode.style.zIndex=100;}else if(relTarget.tagName.toLowerCase()=="a"&&relTarget.name!=""){downlst.style.display="block";downlstfrm.style.display="block";downlst.parentNode.style.zIndex=100;}else if(relTarget.className!="clsInput"&&relTarget.className!="selectDownList"&&relTarget.className!="selectControlBtn"){downlst.style.display="none";downlstfrm.style.display="none";downlst.parentNode.style.zIndex=0;}}catch(err){}};o.selectButton.onmouseout=mout;o.self.onmouseout=mout;document.onclick=function(e){var e=(e)?e:window.event;var el=(e.target)?((e.target.nodeValue==3)?e.target.parentNode:e.target):e.srcElement;if(!o.isInTarget(el,o.dropDownList)&&el!=o.selectButton&&el!=o.self){downlst.style.display="none";downlstfrm.style.display="none";downlst.parentNode.style.zIndex=0;document.onclick=null;}};}};htmlElementSelect.prototype.isInTarget=function(targo,id){var el=targo;if(!el)return false;while(el==null||el.tagName.toLowerCase()!="body"){if(el.id==id){return true;}

if(!el.parentNode)return false;el=el.parentNode;}};htmlElementSelect.prototype.showDirection=function(o,dimArry){var dlstW=(o.listContent.style.width==""||parseInt(o.listContent.style.width.replace("px",""))<o.self.offsetWidth+15)?o.self.offsetWidth+15:parseInt(o.listContent.style.width.replace("px",""));var dlstH=(o.listContent.style.height=="")?200:parseInt(o.listContent.style.height.replace("px",""));if(typeof(window.innerHeight)=='number'){var wH=window.innerHeight;var wW=window.innerWidth;}else if(document.documentElement&&document.documentElement.clientHeight){var wH=document.documentElement.clientHeight;var wW=document.documentElement.clientWidth;}else{var wH=document.body.clientHeight;var wW=document.body.clientWidth;}

if(dimArry[0]>dimArry[2]&&(dimArry[3]-sY)+dimArry[4]+dlstH>wH){return['left','up'];}else if(dimArry[0]<=dimArry[2]&&(dimArry[3]-sY)+dimArry[4]+dlstH>=wH){return['right','up'];}else if(dimArry[0]<=dimArry[2]&&(dimArry[3]-sY)+dimArry[4]+dlstH<wH){return['right','down'];}else{return['left','down'];}};htmlElementSelect.prototype.changeListContentState=function(o,elnm){if(!elnm||elnm=='')return;var itms_c=o.listContent.getElementsByTagName("a");for(var j=0;j<itms_c.length;j++){if(elnm==itms_c[j].name){itms_c[j].style.backgroundColor="#0000be";itms_c[j].style.color="#ffffff";}else{itms_c[j].style.backgroundColor="";itms_c[j].style.color="";}}};htmlElementSelect.prototype.handleSetValue=function(o,itm){setSelectItemValue(o,itm);};htmlElementSelect.prototype.setRelationControl=function(o,relo){o.relationControl=relo;}

function setSelectItemValue(o, itm){

o.saveValue.value = itm.name;

o.self.value = itm.innerHTML;

}[/code]