纯CSS 自定义单选框与多选框

很多时候需要自定义单选，多选，用css自定义来帮助我们解决这个问题

兄弟们老规矩先上图

 代码html

<label class="noselect checkLabel">
	<input type="checkbox"><i>✓</i>复选框
</label><br>
<label class="checkLabel">
	<input type="checkbox" checked><i>✓</i>复选框
</label><br>
<label class="checkLabel">
	<input type="checkbox" disabled><i>✓</i>复选框禁用
</label><br>
<label class="checkLabel">
	<input type="checkbox" disabled checked><i>✓</i>复选框禁用已选
</label><br>
<label class="checkLabel">
	<input type="radio" name="abc"><i>✓</i>单选框
</label><br>
<label class="checkLabel">
	<input type="radio" name="abc" checked><i>✓</i>单选框
</label><br>
<label class="checkLabel">
	<input type="radio" name="abc" disabled><i>✓</i>单选框禁用
</label><br>
<label class="checkLabel">
	<input type="radio" name="def" disabled checked><i>✓</i>单选框禁用已选
</label><br>

css

.checkLabel {
	font-size: 12px;
	cursor: pointer;
}

.checkLabel i {
	font-size: 12px;
	font-style: normal;
	display: inline-block;
	width: 12px;
	height: 12px;
	text-align: center;
	line-height: 12px;
	color: rgba(255, 255, 255, 0);
	vertical-align: middle;
	margin: -2px 2px 1px 0px;
	border: #2489c5 1px solid;
	border-radius: 50%;
}

.checkLabel input[type="checkbox"],
input[type="radio"] {
	display: none;
}

.checkLabel input[type="checkbox"]:checked+i,
input[type="radio"]:checked+i {
	background: #2489c5;
	color: rgba(255, 255, 255, 1);
}

.checkLabel input[type="checkbox"]:disabled+i,
input[type="radio"]:disabled+i {
	border-color: #ccc;
}

.checkLabel input[type="checkbox"]:checked:disabled+i,
input[type="radio"]:checked:disabled+i {
	background: #ccc;
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently not supported by any browser */
}

拿走不谢，点个赞！！！