select美化自定義下拉框樣式

2024-04-27 15:19:44

字體：大中小

供稿：網(wǎng)友

<!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(/jscss/demoimg/201403/icon.png) no-repeat 156px 0;}.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="選擇風(fēng)格" selected="selected">選擇風(fēng)格</option><option value="復(fù)古風(fēng)">復(fù)古風(fēng)</option><option value="搖滾風(fēng)">搖滾風(fēng)</option><option value="懷舊風(fēng)">懷舊風(fēng)</option></select><script type="text/javascript" src="/Ajaxjs/jquery-1.7.2.min.js"></script><script type="text/Javascript">(function($){var selects=$('select');//獲取selectfor(var i=0;i<selects.length;i++){createSelect(selects[i],i);}function createSelect(select_container,index){//創(chuàng)建select容器，class為select_box，插入到select標(biāo)簽前var tag_select=$('<div></div>');//div相當(dāng)于select標(biāo)簽tag_select.attr('class','select_box');tag_select.insertBefore(select_container);//顯示框class為select_showbox,插入到創(chuàng)建的tag_select中var select_showbox=$('<div></div>');//顯示框select_showbox.css('cursor','pointer').attr('class','select_showbox').appendTo(tag_select);//創(chuàng)建option容器，class為select_option，插入到創(chuàng)建的tag_select中var ul_option=$('<ul></ul>');//創(chuàng)建option列表ul_option.attr('class','select_option');ul_option.appendTo(tag_select);createOptions(index,ul_option);//創(chuàng)建option//點(diǎn)擊顯示框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相當(dāng)于optiontxt_option=options.eq(n).text();tag_option.text(txt_option).css('cursor','pointer').appendTo(ul_list);//為被選中的元素添加class為selectedif(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>

效果如下

上一篇：word-break屬性驗(yàn)證

下一篇：17.（初級）CSS彈性盒flex