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>

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

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

HTML中select下拉框默认样式修改

本方法只修改下拉框样式,不修改option样式,修改后的样式: 思路: 1.先去掉select本身原有的样式。 2.用一个元素(div/lebal等)作为select的父元素。 3.在se...
  • CSDN_XueXiaoQiang
  • CSDN_XueXiaoQiang
  • 2016年12月07日 09:34
  • 22390

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

使用原生css效果,实现一个网站主页常见的下拉菜单效果
  • beimingmuyu
  • beimingmuyu
  • 2016年03月28日 12:04
  • 9056

用纯css改变下拉列表select框的默认样式

1.方法一:原理:将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可。在线示例地址:http://jsbin.com/rejebopahe/edit?html,css,o...
  • u012340918
  • u012340918
  • 2016年05月20日 20:42
  • 20008

jquery插件,美化select标签

最近经常与select打交道,因为ie下的select实在太丑了,
  • YUZEQUNSTU
  • YUZEQUNSTU
  • 2014年09月01日 23:43
  • 1195

android 基础知识之select样式文件

注意:创建select样式文件,位置:drawable/xxx.xml,记得在同一目录下记得要放置相关图片资源。   Android 之Select标签结构: ...
  • zhouzhiwengang
  • zhouzhiwengang
  • 2014年12月04日 10:20
  • 1090

+++用纯css改变下拉列表select框的默认样式+++

http://ourjs.com/detail/551b9b0529c8d81960000007 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式。 ...
  • u011537073
  • u011537073
  • 2016年03月24日 00:34
  • 1625

使用前端框架后js动态改变样式的一些问题(select)

问题描述: 最近在做一个项目,用到一个前端框架,其中一个需求是:在选中“部门”这个下拉菜单(select)之后,要求另外三个“车间”“班组”“工种”下拉菜单(select)变为不可编辑,即这三个下拉...
  • qq_37444478
  • qq_37444478
  • 2017年07月26日 15:02
  • 494

修改select默认样式

html代码: volvo Saab Opel Audi
  • smile016
  • smile016
  • 2017年08月01日 16:46
  • 232

CSS3 中关于 select 下拉列表的样式

http://www.oschina.net/code/snippet_12_46548 代码片段(2)[全屏查看所有代码] 1. [图片] Styling_SELECT.jp...
  • u011537073
  • u011537073
  • 2016年03月24日 00:32
  • 2069
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:select 样式修改
举报原因:
原因补充:

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