Checkbox和Radio 美化样式

代码：

<style type="text/css">
body {
	font: 16px/150% microsoft yahei,pingfang sc,Tahoma,Sim sun;
	}
input:disabled + label {/*禁用的指针*/
	cursor: not-allowed
	}
.Radio input,
.Checkbox input {
	display: none
	}
.Radio label,
.Checkbox label {
	padding: 0 16px 0 0;
	display: inline-block;
	cursor: pointer;
	position: relative
	}
.Radio label:before,
.Checkbox label:before {
	box-sizing: border-box;
	content: "";
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid #999;
	margin: 0 8px;
	vertical-align: middle;
	display: inline-block;
	transition: 0.1S;
	}
.Radio label:hover:before,
.Checkbox label:hover:before {
	border-color: #00a4ff;
	}
.Radio input:disabled + label:before,
.Checkbox input:disabled + label:before {
	background-color: #CCC;
	border-color: #999;
	opacity: 0.5;
	}
.Radio input:disabled + label,
.Checkbox input:disabled + label {
	opacity: 0.5;
	}
.Radio input:checked + label:before {
	border: 5px solid #00a4ff;
	}
.Checkbox label:before {
	background: url(images/ico_tick.svg) no-repeat center;
	background-size: 0;
	border-radius: 4px;
	transition: 0.2S;
	}
.Checkbox input:checked + label:before {
	background-color: #00a4ff;
	background-size: 16px;
	border-color: #00a4ff;
	}
.HoverLabel label {
	display: block;
	border-radius: 4px;
	padding: 4px;
	width: 100%;
	}
.HoverLabel label:hover {
	background-color: #EEE;
	}
</style>

效果：

源码下载：https://yy123.ink/frontDetail/71