利用伪类:after改变checkbox样式

``
今天我们UI发了一张设计图，里面CheckBox长这样，然后我开始敲的时候发现不管我怎么改check样式都不能改变check的默认样式，后面去网上百度了一下，好多都说用伪类就可以改变，我一想，伪类可以改变他自身？一进去看代码，发现是通过伪类来重新创一个checkbox样式然后通过定位把原来的样式给遮挡住，就实现了改变checkbox的样式。下面附上我实现这个功能的代码供大家参考。

/* 修改checkbox的默认样式 */
input[type='checkbox'] {
	width: 15px;
	height: 15px;
	outline: none;
	margin-right: 10px;
	cursor: pointer;
	position: relative;
	margin-bottom: 3px;
}

input[type='checkbox']:after {
	position: absolute;
	width: 10px;
	height: 15px;
	top: 0;
	content: " ";
	background-color: white;
	border: 1px solid;
	color: black;
	display: inline-block;
	visibility: visible;
	padding: 0px 3px;
	cursor: pointer;
}

input[type='checkbox']:checked:after {
	content: "✓";
	font-size: 12px;
	background-color: orangered;
	color: white;
}