纯css3自定义美化input radio(单选框)和checkbox(多选框)的样式
2015-07-20 12:22:18  By: shinyuu

• shinyuu
• CSS3教程
• 0
• 25276
• 21

估计做过Web的都发现了一个问题、radio和checkbox由于不同的浏览器显示的样式不一致、因此我们需要自定义radio(单选框)和checkbox（多选框）的样式、基本原理就是给radio和checkbox的自定义样式设置成图片背景、然后通过js或者jQuery给包裹radio和checkbox的label根据点击效果添加和删除类别、从而达到自定义radio和checkbox的假象、最终生成的效果图、如下所示

HTML代码如下

<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代码

<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代码

* { 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样式的js代码、采用的是jQuery、所以一定要先引入jQuery文件、以上就是使用纯CSS自定义radio(单选框)和checkbox（多选框）的样式的全部代码、代码可以直接拷贝运行、赶紧去试一下吧

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛