css修改方框内容,CSS改变checkbox的方框及对勾的粗细

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

效果图如下：

代码如下：

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;"

}

}