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

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

下面直接上代码：

HTML代码

需要如下的HTML代码

     

       
                    Checkbox1
               
       
                    Checkbox2
     
     

       
                   Radio1
               
       
                   Radio2
               
       
                    Radio3
               
     

JavaScript代码

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

CSS代码

最后的CSS代码，如下所示：

* { 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（多选框）的样式的全部代码，代码可以直接拷贝运行，赶紧去试一下吧。