select默認的樣式比較丑，有些應用需要美化select，在網上找到一個很好的美化樣式效果，本人很喜歡，在這里分享一下。
<!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> <title>select美化自定義下拉框樣式</title> </head> <body> <style type="text/css"> *{margin:0;padding:0;} select{outline:none;} ul{list-style:none;} a{text-decoration:none;} select{display: none;} .select_box{font-family: "宋體"; font-size: 12px;color: #999999;width: 178px;line-height: 20px;margin: 50px auto;} .select_showbox{border: 1px solid #b0a296;height: 20px;padding-left: 5px;/*background: url(img/icon.png) no-repeat 156px 0;可以替換成想要的下拉三角*/background: #ccc;} .select_option{border: 1px solid #b0a296;border-top: none;display: none;} .select_option li{padding-left: 5px;} .select_option li.selected{background-color: #F3F3F3;color: #999;} .select_option li.hover{background: #7b6959; color: #fff;} </style> <select name="choose" id="choose"> <option value="選擇風格" selected="selected">選擇風格</option> <option value="復古風">復古風</option> <option value="搖滾風">搖滾風</option> <option value="懷舊風">懷舊風</option> </select> <script src="http://www.codefans.net/ajaxjs/jquery-1.7.2.min.js"></script> <script type="text/javascript"> (function($){ var selects=$('select');//獲取select for(var i=0;i<selects.length;i++){ createSelect(selects[i],i); } function createSelect(select_container,index){ //創建select容器，class為select_box，插入到select標簽前 var tag_select=$('<div></div>');//div相當於select標簽 tag_select.attr('class','select_box'); tag_select.insertBefore(select_container); //顯示框class為select_showbox,插入到創建的tag_select中 var select_showbox=$('<div></div>');//顯示框 select_showbox.css('cursor','pointer').attr('class','select_showbox').appendTo(tag_select); //創建option容器，class為select_option，插入到創建的tag_select中 var ul_option=$('<ul></ul>');//創建option列表 ul_option.attr('class','select_option'); ul_option.appendTo(tag_select); createOptions(index,ul_option);//創建option //點擊顯示框 tag_select.toggle(function(){ ul_option.show(); },function(){ ul_option.hide(); }); var li_option=ul_option.find('li'); li_option.on('click',function(){ $(this).addClass('selected').siblings().removeClass('selected'); var value=$(this).text(); select_showbox.text(value); ul_option.hide(); }); li_option.hover(function(){ $(this).addClass('hover').siblings().removeClass('hover'); },function(){ li_option.removeClass('hover'); }); } function createOptions(index,ul_list){ //獲取被選中的元素並將其值賦值到顯示框中 var options=selects.eq(index).find('option'), selected_option=options.filter(':selected'), selected_index=selected_option.index(), showbox=ul_list.prev(); showbox.text(selected_option.text()); //為每個option建立個li並賦值 for(var n=0;n<options.length;n++){ var tag_option=$('<li></li>'),//li相當於option txt_option=options.eq(n).text(); tag_option.text(txt_option).css('cursor','pointer').appendTo(ul_list); //為被選中的元素添加class為selected if(n==selected_index){ tag_option.attr('class','selected'); } } } })(jQuery) </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> </body> </html>
效果如下：
