关闭

select 样式修改

541人阅读 评论(0) 收藏 举报
分类:

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>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:119046次
    • 积分:2832
    • 等级:
    • 排名:第13112名
    • 原创:163篇
    • 转载:46篇
    • 译文:1篇
    • 评论:5条
    最新评论