radio，checkbox样式美化

1.构建dom元素

<div class="calendar_events">
	<a class="banci_info">
		<input type="radio" value="早班" name="banci" id="zaoban" />
		<span for="zaoban">早班</span>
	</a><a class="banci_info">
		<input type="radio" value="中班" name="banci" id="zhongban" />
		<span for="zhongban">中班</span>
	</a><a class="banci_info">
		<input type="radio" value="晚班" name="banci" id="wanban" />
		<span for="wanban">晚班</span>
	</a><a class="banci_info">
		<input type="radio" value="其他" name="banci" id="qita" />
		<span for="qita">其他</span>
	</a>
</div>

2.添加css样式

.calendar_events{
	width: 100%;
	height: 50px;
	line-height: 50px;
	overflow-x: hidden;
}
.calendar_events .banci_info{
	display: inline-block;
	text-decoration: none;
	width: 25%;
	height: 50px;
	line-height: 50px;
	position: relative;
	left: 10px;
	color: white;
}
.calendar_events .banci_info input{
	position: absolute;
	opacity: 0;
	z-index: -1;
}
.calendar_events .banci_info span:after{
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	position: absolute;
	top: 15px;
	left: 0px;
	border: 1px solid #CC6666;	
	border-radius: 50%;
}
.calendar_events .banci_info span{
	padding-left: 25px;			
}
.calendar_events .banci_info span:before{
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	position: absolute;
	top: 19px;
	left: 4px;
	/*background: #CC6666;*/
	border-radius: 50%;
}
.calendar_events .banci_info input:checked + span:before {
	 background: #CC6666;
}
.calendar_events .banci_info input:checked + span:after {
	border: 1px solid white;
}

4.编写js

$(".calendar_events .banci_info").click(function(){
	$(this).children("input").prop("checked",true);
})

5.效果展示