欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  技术分享

纯css3自定义美化input radio(单选框)和checkbox(多选框)的样式

程序员文章站 2022-03-01 13:23:14
...

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

纯css3自定义美化input 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(多选框)的样式的全部代码、代码可以直接拷贝运行、赶紧去试一下吧