您好,歡迎來到web微博客 設為首頁加入收藏
web微博客最好的資源共享平臺!
精品cms模板和教程都在這里!
web微博客清新上線!

select美化自定義下拉框樣式
2016-10-12 12:35:02   來源:web微博客   評論:0 點擊:

分享到:
<!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美化自
<!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="選擇風格" selected="selected">選擇風格</option>
<option value="復古風">復古風</option>
<option value="搖滾風">搖滾風</option>
<option value="懷舊風">懷舊風</option>
</select>
<script type="text/javascript" src="/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>

上一篇:div+css+js模擬的select的下拉框效果
下一篇:最后一頁

湖南快乐十分走势图表