element-ui当中复选框(el-checkbox)更改为圆形样式

在element-ui当中有些属性的样式优先级特别的高的所以我们采用样式穿透的方式来实现我们自身先实现的样式 下面是对复选框做的一个样式设定

/deep/ .checkedfalse .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background: #DCDFE5;
  border: 1px solid #DCDFE5;
  border-radius: 50%; //对边框进行调整
}
 
/deep/ .checkedfalse .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
  border-color: #ffffff;//里面内容的颜色
  border-width: 2px; //对里面的对号做一个加粗
}

更改完调整大致就是这样子

出现错位的情况需要加对内容进行定位

.round-checkbox .el-checkbox input.is-checked .el-checkbox inner::after{
    !top: 50%;
    left: 50%;
    transform: translate(-50%，-50%) scale(0.8) rotate(45deg);
}