select本身不能修改样式可以用一种折中的方法 input+div实现
<!DOCTYPE HTML>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".select_m").click(function(){
$(this).children(".select_x").toggle();
var sel = $(this).children("input").val();
if(!sel){
$(this).children(".select_x a:first").addClass("jingguo");
}
});
$(".select_x a").mousemove(function(){
$(this).addClass("jingguo").siblings().removeClass("jingguo");
});
$(".select_x a").click(function(){
var value = $(this).text();
$(this).parents(".select_m").find("input[type=text]").val(value);
});
})
</script>
<style type="text/css">
ul {
margin:50px;
list-style:none;
}
li,input{
width:100%;
}
.select_m{
position:relative;
}
.select_m input{
margin:0px;
}
.xiala{
position:absolute;
top:0px;
right:0px;
cursor:pointer;
}
.xiala img{
border:1px solid #ccc;
padding:0px;
}
.select_x{
width:100%;
border:1px solid #e3e3e3 ;
padding:0px;
margin:0px;
background:#fff;
display:none;
}
.select_x a{
display:block;
}
.select_x a:hover{
background:rgb(51,153,255);
}
.jingguo{
background:rgb(51,153,255);
}
</style>
</head>
<ul>
<li class="select_m">
<input type="text" value="" placeholder="职位" /><span class="xiala"><img src="select.jpg" width="20" height="20" /></span>
<div class="select_x">
<a href="#">111111</a>
<a href="#">222222</a>
<a href="#">333333</a>
</div>
</li>
</ul>
3899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
