首先通过一个例子来回顾一下select标签的用法：
volvosaabfiataudi
然后效果一般时这样的：
美与丑暂且不论...所有html元素中select算是比较坑爹的一个。他让人抓狂的地方主要是：
不同的浏览器显示的默认下拉框样子不完全相同
ie下无法手动设置select的高度（这是最坑爹的！），只能靠font-size撑起来
select右侧的下拉箭头是无法使用背景消除的，这就导致无法使用css进行美化
总结起来，解决办法主要有：
将select隐藏掉，而使用div进行模拟
将select透明度设置为0，然后使用相对定位在下方 加一个长得很像select又美化了的div
隐藏方案一般原理如下：
找到页面需要处理的select，将其隐藏
根据select的option，创建一个li列表（当然也可以是div），并隐藏。
在select的位置创建一个div，显示select的值（selected的option）。并使用css对其进行美化，使其看起来像一个select
添加事件，使点击“select”的时候，显示li列表。并使用相对定位，让这个列表显示在“select”下方
对li列表添加事件，模拟下拉框的选值过程（点击事件和键盘↑↓事件都要模拟）
选值完成后，要将选的值显示到上方的“select”，并设置真正的select的值
当然，如果你想做的更复杂点，还可以添加选项搜索、多选、多选后的选项删除等。当时一般原理都跟上面差不多。网上也有很多这样的插件。但使用网上的插件要注意测试浏览器的兼容性，功能越复杂的模拟select，兼容性越不好做
如果，你的程序不需要那么复杂的select，那么设置透明度的第二种方案也许适合你。今天要分享给大家的也是这个方案。
它的原理如下：
找到当前页面的select，将其透明度设置为0.使其看不见，但是可以点击并选值
创建一个div，使用相对定位，放置到select下方 ，并通过css控制使其看起来像一个select。为什么一定要放在下方呢？因为这样，我们可以点击真正的select，而用户看起来像是点击的这个模拟的select，因为真正的select是完全透明的。如果放置在上方，则用户点击的是这个模拟的select，真正的select不会展开！！！
设置div的text为select的值
添加事件，使真正的select选值后，将值显示到模拟的div上
先上代码吧：
( function ($){var selectfix= function (){var select=$( this );//设置透明度为0 当然你也可以使用css控制 使用jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题$(select).css({opacity :0});//找到select的选项var soptions= this .get(0).options;//设置模拟select的值var setfixdivtext= function (selectvalue){var text= ;for ( var i=0;i ' );select.after(selectfixdiv);var left=$(select).offset().left;var top=$(select).offset().top-1; //因为一般select都有1px的边框，所以这里往上拉1px$(selectfixdiv).css({top : top,left : left});//select选值时，将值显示到模拟的select上$(select).bind( change click , function (){$(selectfixdiv).text(setfixdivtext($( this ).val()));});};$.fn.selectfix=selectfix;})(jquery);
(function($){ var selectfix=function(){ var select=$(this); //设置透明度为0 当然你也可以使用css控制 使用jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题 $(select).css({ opacity:0 }); //找到select的选项 var soptions=this.get(0).options; //设置模拟select的值 var setfixdivtext=function(selectvalue){ var text=; for(var i=0;i '); select.after(selectfixdiv); var left=$(select).offset().left; var top=$(select).offset().top-1;//因为一般select都有1px的边框，所以这里往上拉1px $(selectfixdiv).css({ top : top, left : left }); //select选值时，将值显示到模拟的select上 $(select).bind(change click,function(){ $(selectfixdiv).text(setfixdivtext($(this).val())); }); }; $.fn.selectfix=selectfix; })(jquery);
插件代码运行：
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代码：
new document 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;} 男 女 new document 男 女

兼容主流浏览器。
但也还是有个重大的缺陷，在老版本的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：
男 女 男 女
然后，在外部容器显示的时候，手动调用$(#sex).selectfix()
2、如果容器的显示或者隐藏是第三方插件控制，修改不方便可考虑下面的方案：
在美化程序中，先判断select是否隐藏，如果否逻辑不变，如果隐藏，则加入一个timer，循环判断元素是否被显示，在其显示的时候再自动调用fix，然后将timer移除
代码如下：
//加上隐藏select的操作( function ($){var selectfix= function (){var select=$( this );//设置透明度为0 当然你也可以使用css控制 使用jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题$(select).css({opacity :0});if (!select.is( :hidden )){var soptions= this .get(0).options;var setfixdivtext= function (selectvalue){var text= ;for ( var i=0;i ' );select.after(selectfixdiv);var selectwidth=$(select).innerwidth();var selectfixdivwidth=$(selectfixdiv).innerwidth();var left=$(select).offset().left;var top=$(select).offset().top-1;$(selectfixdiv).css({top : top,left : left,margin : 0});$(select).bind( change click , function (){$(selectfixdiv).text(setfixdivtext($( this ).val()));});} else {var tasks = function (){if (!$(select).is( :hidden )){$(select).selectfix();clearinterval(timer);}};var timer=setinterval(tasks,500)}};$.fn.selectfix=selectfix;})(jquery);
//加上隐藏select的操作 (function($){ var selectfix=function(){ var select=$(this); //设置透明度为0 当然你也可以使用css控制 使用jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题 $(select).css({ opacity:0 }); if(!select.is(:hidden)){ var soptions=this.get(0).options; var setfixdivtext=function(selectvalue){ var text=; for(var i=0;i '); select.after(selectfixdiv); var selectwidth=$(select).innerwidth(); var selectfixdivwidth=$(selectfixdiv).innerwidth(); var left=$(select).offset().left; var top=$(select).offset().top-1; $(selectfixdiv).css({ top : top, left : left, margin : 0 }); $(select).bind(change click,function(){ $(selectfixdiv).text(setfixdivtext($(this).val())); }); }else{ var tasks = function(){ if(!$(select).is(:hidden)){ $(select).selectfix(); clearinterval(timer); } }; var timer=setinterval(tasks,500) } }; $.fn.selectfix=selectfix; })(jquery);
运行代码跟原来的不变。