功能：美化select 下拉列表
说明：因为IE不能通过css修改样式，所以需要通过Jquery来修改，下面是一个成功的案例，自己再修改下样式就好了
PS:如果需要用到多次的，注意z-index的值，（顶部的要给底部的值大）
Javascript代码：
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.select_box span').click(function(){ //鼠标移动函数
$('.son_ul').hide(); //初始ul隐藏
$(this).parent().find('ul.son_ul').show(); //找到ul.son_ul显示
$(this).parent().find('li').hover(function(){
$(this).addClass('hover')},function(){$(this).removeClass('hover')}); //li的hover效果
$(this).parent().click(function(){},
function(){
$(this).parent().find("ul.son_ul").hide();
}
);
},function(){}
);
$('ul.son_ul li').click(function(){
$(this).parents('li').find('span').html($(this).html());
$(this).parents('li').find('ul').hide();
});
});
</script>
HTML代码： <body><ul class="main_box"> <span class="point">*</span> <li class="select_box" > <span>请选择</span> <ul class="son_ul"> <li>选项一</li> <li>选项二</li> <li>选项三</li> <li>选项四</li> <li>选项五</li> </ul> </li></ul> </body>
CSS代码： <style type="text/css"><!--body {padding:10px; background:#eee; color:#666}* {margin:0; padding:0; font-size:12px;}ul,li { list-style-type:none; margin: 0px; padding: 0px;}.point { color: #a40000; float: left; display: block; height: 30px; line-height: 30px;}
.select_box { float:left; width:65px; padding-right:10px; padding-left:10px; url(left-selectbg.gif ) no-repeat 65px center; position:relative; z-index:101;}.select_box span {cursor:pointer; display:block; line-height:25px; width:100%; height:25px; overflow:hidden;}.select_box ul li {cursor:pointer;}.son_ul { width:75px; ; position:absolute; z-index:101; left:-1px; top:25px; border:1px solid #ccc; display: none; background-color: #fff;}.son_ul li { display:block; line-height:25px; padding-left:10px; width:65px;}.hover {background:#ccc;}--></style> -------------源代码已经共享，下载附件看吧
共同学习，写下你的评论
评论加载中...
作者其他优质文章
