您现在的位置:首页 --> JavaScript --> 简单js+css实现模拟自定义select样式
简单js+css实现模拟自定义select样式
浏览:4417次 出处信息
对于select这个标签在各个浏览器下的显示样式都不相同,这就给设计师和前端开发者带来了极大的不方便。所以做出一个统一的样式的select样式是最直接的需求。
那么如何实现不同的浏览器下,有着相同样式的select呢?
下面看下本人的方法:
- 该方法主要用到的是js+css,代码量小,无插件
- 自定义select的样式
- 兼容性方面嘛,ie6可以无视了。
实现原理:(js+css模拟select样式)
将select的标签元素,设置opacity:0隐藏掉,并给其设置z-index将其移动到最上层。这样在点击外围box的时候,实际上是点击了select。
然后通过select的onchange事件,将选中的数据赋值到span元素中显示出来。
ie6下只会显示一个默认的select选择样式
废话不多说,看演示代码:
<div class="sel_wrap" id="sel_wrap"> <span>请从下面选择</span> <select class="select" name="" id="c_select"> <option value="0">牛魔王的世界观</option> <option value="1">专注于web前端开发</option> <option value="2">欢迎多多交流</option> </select> </div> <style> .sel_wrap{width:300px;height:26px;
background:#fafafa url(http://images.niumowang.org/wp-content/uploads/2012/04/select.png)
no-repeat right center;border:1px solid #ccc;border-radius:4px;cursor:pointer;
position:relative;_filter:alpha(opacity=0);} .sel_wrap span{line-height:26px;padding-left:10px;font-size:13px;z-index:2;} .sel_wrap .select{width:300px;height:28px;z-index:4;position:absolute;top:0;
left:0;margin:0;padding:0;opacity:0;cursor:pointer;} </style> <script> function $(x){ return document.getElementById(x); } var sel=$("c_select"); var wrap=$("sel_wrap"); var result=wrap.getElementsByTagName("span"); wrap.onmouseover=function(){ this.style.backgroundColor="#fff"; } wrap.onmouseout=function(){ this.style.backgroundColor="#fafafa"; } sel.onchange=function(){ var opt=this.getElementsByTagName("option"); var len=opt.length; for(i=0;i<len;i++){ if(opt[i].selected==true){ x=opt[i].innerHTML; } } result[0].innerHTML=x; } </script>
注:如果想要获取返回的是选中的option的value值,那么将下面代码
var opt=this.getElementsByTagName("option");
var len=opt.length;
for(i=0;i<len;i++){
if(opt[i].selected==true){
x=opt[i].innerHTML;
}
}替换成:
var x=this.vaue;
建议继续学习:
- 学习libevent的select模型 (阅读:3850)
- 关于JS获取select的值 (阅读:3177)
- InnoDB select性能拐点测试 (阅读:2855)
- 用 Jquery 模拟 select (阅读:2731)
- IE6下select下拉框不能随滚动条正常滚动 (阅读:1954)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:jquery实现无限滚动瀑布流实现原理
后一篇:ie下iframe输入框焦点丢失解决方案 >>
文章信息
- 作者:痞子 来源: 牛魔王的世界观
- 标签: select
- 发布时间:2012-09-10 23:29:05
建议继续学习
近3天十大热文
- [65] Oracle MTS模式下 进程地址与会话信
- [64] Go Reflect 性能
- [64] 如何拿下简短的域名
- [58] IOS安全–浅谈关于IOS加固的几种方法
- [58] 【社会化设计】自我(self)部分――欢迎区
- [57] android 开发入门
- [57] 图书馆的世界纪录
- [51] 视觉调整-设计师 vs. 逻辑
- [46] 读书笔记-壹百度:百度十年千倍的29条法则
- [45] 界面设计速成