当前位置:首页 > 站长推荐 > 自定义 html select下拉选择样式讲解

自定义 html select下拉选择样式讲解

HTML 的select 对于不同的浏览器有不同的样式,这样给前台开发人员带来很多困扰,本文就介绍怎样自定义select样式。
网上也许有相关的插件,但是单独为您一个控件样式去使用一个插件感觉给网站带来冗余的感觉,所以我的建议是自定义样式,其实要实现自定义select下拉选择框的样式是要在select上面覆盖一层,这样我们看到的样式就会覆盖掉原来的select的样式,这样就实现了自定义,对于选择的改变我们可以使用select的onchange事件来将选择的内容显示到选择框中,废话不多说,我们直接上代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<div class="sel_wrap" id="sel_wrap">
	<span>请从下面选择</span>
	<select class="select" name="" id="c_select">
		<option value="0">知道91</option>
		<option value="1">IT 技术博客</option>
		<option value="2">欢迎交流</option>
	</select>
</div>
<style>
.sel_wrap{width:300px;height:26px;background:#fafafa url(http://www.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>

效果如下图所示:
js+css实现模拟自定义select样式示意图


注:如果想要获取返回的是选中的option的value值,可以使用下面的代码
1
2
3
4
5
6
7
8
9
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;

就是这么简单就可以实现js+css的自定义select样式,好了赶紧去尝试一下吧。

  • << HTML+JS+CSS 实现Tab选项卡
  • ThinkPHP 新手入门教程(六)之类库讲解 >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/js-css-select-style/

    相关文章 近期热评 最新文章

    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程
    • c#类的构造函数继承关系示例剖析
      本文通过示例代码讲解了c#子类的构造函数与父类的关系,子类怎样集成父类的构造函数的。