CSS改变checkbox的方框及对勾的粗细

在某些情况下，我们不希望使用原有的checkbox的样式，这时候可以自己写一个

效果图如下：

代码如下：

<span class="check" style="opacity: 1;"></span>

CSS样式如下：

/* 定义一个透明的对勾，当点击时设置透明度为1，再次点击设置为0，实现点击勾选 */
.autologin-con .auto-login .check{
	position: absolute;
	top: 2px;
	left: 2px;
	content: "";
	width: 9px;
	height: 5px;
	background: inherit;
	border: 1px solid #333333;
	border-top: none;
	border-right: none;
	transform: rotate(-45deg);
}

JS代码如下：

//定义一个透明的对勾，当点击时设置透明度为1，再次点击设置为0，实现点击勾选
var autoLogin = document.getElementsByClassName("auto-login")[0];
autoLogin.onclick = function(){
	var check = document.getElementsByClassName("check")[0]; 
	// 注意:这里check.style只能取行内样式,所以我将opacity样式写到了标签中
	if(check.style.opacity === "1"){
		check.style.cssText = "opacity: 0;"
	}else{
		check.style.cssText = "opacity: 1;"
	}
}