select 样式修改

原创 2013年12月04日 17:02:25

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>

相关文章推荐

修改下拉列表<select>的默认css样式

使用原生css效果,实现一个网站主页常见的下拉菜单效果

radio select 样式修改CSS

实现上述效果的代码,如下... ...

修改select默认样式

html代码: volvo Saab Opel Audi

纯css修改下拉列表select的默认样式

select的一些默认样式我们很难修改,比如图标的替换。接下来就说说如何修改这些默认样式:html代码: 芝士 奶油 给select添加父元素div...

select样式表

  • 2012年12月12日 16:46
  • 5KB
  • 下载

android 基础知识之select样式文件

注意:创建select样式文件,位置:drawable/xxx.xml,记得在同一目录下记得要放置相关图片资源。   Android 之Select标签结构: ...

css实现表单Select样式美化

  • 2011年05月19日 11:28
  • 11KB
  • 下载

input、select、textarea兼容不同浏览器样式统一

输入框高亮,文字上下居中 input,textarea,select { border:1px solid #ccc; font-family:inherit; font...
  • mmrsdym
  • mmrsdym
  • 2015年04月28日 10:55
  • 1312
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:select 样式修改
举报原因:
原因补充:

(最多只允许输入30个字)