checkbox 样式修改

未选中时的样式

/deep/ .el-checkbox {
    background: #fff;
    padding: 10px 10px;
    line-height: 100%;
    border-radius: 4px;
    margin-right: 10px;
}

选中状态时的样式

/deep/ .el-checkbox.is-checked {
    background: #EDF6F2;
    border: 1px solid #47A87D;
    padding: 10px 10px;
    border-radius: 4px;
}

选中的 checkbox 样式


/deep/ .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background-color: #47a87d;
    border-color: #47a87d;
}
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label{
  color: #47a87d;
}

选中状态、同时设置了disabled为true的复选框的样式(HTML代码中第一个checkbox的disabled设置为了true

/deep/ .el-checkbox.is-disabled.is-checked {
  padding: 10px 10px;
  border-radius: 4px;
}

选中状态、且disabled设置为true的checkbox的文本的样式

/deep/ .el-checkbox__input.is-disabled + span.el-checkbox__label{
  color: #47a87d;
  cursor: not-allowed;
}

选中状态、disabled设置为true的复选框,设置其可勾选方框的样式

/deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
background-color: #47a87d;
border-color: #47a87d;
}