当前位置:首页 > 教程 > Web前端 > 使用纯CSS自定义radio(单选框)和checkbox(多选框)的样式

使用纯CSS自定义radio(单选框)和checkbox(多选框)的样式

radio和checkbox由于不同的浏览器显示的样式不一致,因此我们需要自定义radio(单选框)和checkbox(多选框)的样式。基本原理就是贱radio和checkbox的自定义样式设置成图片背景,然后通过js或者jQuery给包裹radio和checkbox的label根据点击效果添加和删除类别,从而达到自定义radio和checkbox的假象。

下面直接上代码:

HTML代码

需要如下的HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 <form accept-charset="utf-8" method="get" action="#">
      <fieldset class="checkboxes">
        <label for="checkbox-01" class="label_check">
                    <input type="checkbox" checked="" value="1" id="checkbox-01" name="sample-checkbox-01" /> Checkbox1
                </label>
        <label for="checkbox-02" class="label_check">
                    <input type="checkbox" value="1" id="checkbox-02" name="sample-checkbox-02" /> Checkbox2</label>
      </fieldset>
      <fieldset class="radios">
        <label for="radio-01" class="label_radio">
                    <input type="radio" checked="" value="1" id="radio-01" name="sample-radio" />Radio1
                </label>
        <label for="radio-02" class="label_radio">
                    <input type="radio" value="1" id="radio-02" name="sample-radio" />Radio2
                </label>
        <label for="radio-03" class="label_radio">
                    <input type="radio" value="1" id="radio-03" name="sample-radio" /> Radio3
                </label>
      </fieldset>
    </form>

JavaScript代码

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
<script type="text/javascript">
        $(function(){
            $('body').addClass('has-js');
            $('.label_check,.label_radio').click(function(){
                setupLabel();
            });
            setupLabel();
        });
 
        function setupLabel(){
            if($('.label_check input').length) {
                $('.label_check').each(function(){
                    $(this).removeClass('c_on');
                });
                $('.label_check input:checked').each(function(){
                    $(this).parent('label').addClass('c_on');
                });
            };
            if($('.label_radio input').length) {
                $('.label_radio').each(function(){
                    $(this).removeClass('r_on');
                });
                $('.label_radio input:checked').each(function(){
                    $(this).parent('label').addClass('r_on');
                });
            };
        }        
 
    </script>

上面的代码是控制css样式的js代码,采用的是jQuery,所以一定要先引入jQuery文件。

CSS代码

最后的CSS代码,如下所示:

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
* { margin: 0; padding: 0; }
	body { 
		font: 14px/18px 'HelveticaNeue-Light', 'Helvetica Neue', Arial, Helvetica, sans-serif; 
		color: #fff; 
		background: #333; 
	}
	a:hover, 
	a:active { 
		outline: none; 
	}
	/*form style*/
	form { 
		width: 300px; 
		padding: 18px 20px 0; 
		margin:20px auto;
		background-color: #0064cd;
		background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
		background-image: -moz-linear-gradient(#049cdb, #0064cd);
		background-image: -ms-linear-gradient(#049cdb, #0064cd);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
		background-image: -webkit-linear-gradient(#049cdb, #0064cd);
		background-image: -o-linear-gradient(#049cdb, #0064cd);
		background-image: linear-gradient(#049cdb, #0064cd);    
		-webkit-border-radius: 10px; 
		-moz-border-radius: 10px; 
		-khtml-border-radius: 10px; 
		border-radius: 10px;            
		-webkit-box-shadow: 0 5px 12px rgba(0,0,0,.4); 
		-moz-box-shadow: 0 5px 12px rgba(0,0,0,.4); 
		-khtml-box-shadow: 0 5px 12px rgba(0,0,0,.4); 
		box-shadow: 0 5px 12px rgba(0,0,0,.4); 
	}
	fieldset { 
		border: 0; 
		padding-bottom: 9px;
	}
	label { 
		display: block; 
		cursor: pointer; 
		line-height: 20px; 
		padding-bottom: 9px; 
		text-shadow: 0 -1px 0 rgba(0,0,0,.2); 
	}
	.checkboxes {
		border-bottom: 1px solid #0064cd;
	}
	.radios { 
		padding-top: 18px;
		border-top: 1px solid #049CDB;
	}
	.label_check input,
	.label_radio input { 
		margin-right: 5px; 
	}
 
	.has-js .label_check,
	.has-js .label_radio { 
		padding-left: 34px; 
	}
 
	.has-js .label_radio, 
	.has-js .label_check{ 
		background: url(http://www.w3cplus.com/sites/default/files/checkbox-radio-bg.png) no-repeat; 
	}
	.has-js .label_radio { 
		background-position: 0 0; 
	}
	.has-js .label_check { 
		background-position: 0 -100px
	}
	.has-js label.c_on { 
		background-position: 0 -150px;
	}
	.has-js label.r_on { 
		background-position: 0 -50px; 
	}
	.has-js .label_check input,
	.has-js .label_radio input { position: absolute; left: -9999px; }

效果图

最终生成的效果图,如下所示:
使用纯CSS自定义radio(单选框)和checkbox(多选框)的样式

总结

以上就是使用纯CSS自定义radio(单选框)和checkbox(多选框)的样式的全部代码,代码可以直接拷贝运行,赶紧去试一下吧。

  • << 世界上最经典的10部电影(二)
  • 使用js+html使手机网页禁止拖动和缩放 >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/customer-radio-and-checkbox-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#子类的构造函数与父类的关系,子类怎样集成父类的构造函数的。