select 样式修改

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>

阅读更多
个人分类: javascript/jquery
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

select 样式修改

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭