单选多选样式写法

动画多选样式

// html
<div id="box">
	<input type="checkbox" id="check" name="check" />
	<label for="check">Checkbox</label>
</div>

// css
input[type=checkbox]+label:before {
	height: 16px;
	line-height: 16px;
	 16px;
	border: 1px solid #000;
	display: inline-block;
	vertical-align: top;
	text-align: center;
	margin-right: 5px;
	content: "2713";
	color: transparent;
	transition: color ease .3s;
}
input[type=checkbox]:checked+label:before {
	color: #000;
}

单选按钮样式

// html
<div id="box">
	<input type="radio" id="check" name="check" />
	<label for="check">Checkbox</label>
</div>
// css
input[type=radio] {
	display: none;
}
input[type=radio]+label:before {
	display: inline-block;
	 16px;
	height: 16px;
	line-height: 14px;
	text-align: center;
	vertical-align: top;
	margin-right: 20px;
	content: "26AB";
	border: 1px solid #000;
	border-radius: 50%;
	font-size: 0;
	transition: font-size ease .3s;
}
input[type=radio]:checked+label:before {
	font-size: 12px;
}

参考

掘金-22个必备的CSS小技巧