jQuery(document).ready( function () { var selects=$( "select.selectInput" ); if (selects.length){ selects.each( function (){ $( this ).selectFix(); }); } }); jQuery(document).ready(function() { var selects=$("select.selectInput"); if(selects.length){ selects.each(function(){ $(this).selectFix(); }); } });
下面是html代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > < HTML > < HEAD > < TITLE > New Document </ TITLE > < META NAME = "Generator" CONTENT = "EditPlus" > < META NAME = "Author" CONTENT = "" > < META NAME = "Keywords" CONTENT = "" > < META NAME = "Description" CONTENT = "" > < script type = text /javascript src = "https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" > </ script > < script type = text /javascript src = "https://www.jb51.net/temp.js" > </ script > < style > html {font-family: "宋体";font-size: 12px;line-height: 25px;color: #6F6F6F;} .dn {display: none;} select{cursor: pointer;} input, select, textarea, .selectFix {background: white;border: 1px solid #E0E0E0;hide-focus: expression( this.hideFocus = true ); outline: none;} .formText, .selectInput, .text, .selectFix{border: 1px solid #CCC;width: 180px;height: 30px;line-height:30px;padding: 0 3px;} .selectInput {width: 248px; font-size:13px; position: relative; z-index: 2;} .selectFix{width:248px; background: url(selectBg.png) no-repeat; background-position: right; background-color: #fff; position:absolute; z-index: 1;} </ style > </ HEAD > < BODY > < div id = "main" > < select id = "sex" class = "selectInput" name = "sex" > < option value = "0" > 男 </ option > < option value = "1" > 女 </ option > </ select > </ div > </ BODY > </ HTML > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META CONTENT="EditPlus"> <META CONTENT=""> <META CONTENT=""> <META CONTENT=""> <script type=text/javascript src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> <script type=text/javascript src="https://www.jb51.net/temp.js"></script> <style> html {font-family: "宋体";font-size: 12px;line-height: 25px;color: #6F6F6F;} .dn {display: none;} select{cursor: pointer;} input, select, textarea, .selectFix {background: white;border: 1px solid #E0E0E0;hide-focus: expression(this.hideFocus=true); outline: none;} .formText, .selectInput, .text, .selectFix{border: 1px solid #CCC;width: 180px;height: 30px;line-height:30px;padding: 0 3px;} .selectInput {width: 248px; font-size:13px; position: relative; z-index: 2;} .selectFix{width:248px; background: url(selectBg.png) no-repeat; background-position: right; background-color: #fff; position:absolute; z-index: 1;} </style> </HEAD> <BODY> <div> <select> <option value="0">男</option> <option value="1">女</option> </select> </div> </BODY> </HTML>
兼容主流浏览器。
但也还是有个重大的缺陷，在老版本的ie中，真正select的高度还是无法撑开。所以，用户点击模拟的select的靠下方的位置会发现select无法展开！！
不过设计的艺术在于平衡，如果你无法忍受这个缺陷，可以使用第一种解决方案。
另外，在测试后，发现如果select处于一个隐藏的容器中，那么显示后，select的位置是一个空白！！
这是怎么回事呢？！
原来，html元素隐藏后是无法获取他的屏幕坐标的！！！ 所以这时候显示出来，真正的select完全透明了，而模拟的select跑到屏幕的左上角去了。因为他获取select的坐标为（0,0）
不要着急，这个问题有下面的解决办法：
1、单独写代码触发select的美化程序
首先，你需要将上面的美化程序运行代码做以下修改：
jQuery(document).ready( function () { var selects=$( "select.selectInput" ); if (selects.length){ selects.each( function (){ if (!($( this ).attr( "autoFix" )== "false" )){ $( this ).selectFix(); } }); } }); jQuery(document).ready(function() { var selects=$("select.selectInput"); if(selects.length){ selects.each(function(){ if(!($(this).attr("autoFix")=="false")){ $(this).selectFix(); } }); } });
然后，在隐藏的select上加属性autoFix="false"：