Element-ui Checkbox 多选框 样式修改

<div class="checkbox-div">
  <el-checkbox-group v-model="checkboxList">
    <el-checkbox
      v-for="item in options"
      :label="item"
      :key="item"
      :class="{unselected: item ? true:false}"
    >{{item}}</el-checkbox>
  </el-checkbox-group>
</div>

css

.checkbox-div {
  margin-top: 30px;
  margin-bottom: 30px;
  // 未选中样式
  /deep/ .el-checkbox__inner {
    border-radius: 0;
    background-color:#A8A8A8;
  }
  /deep/ .el-checkbox {
    color: #a8a8a8;
  }
  /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #6c7c92;
  }
  /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #6c7c92;
    border-color: #6c7c92;
  }
  // 加未选中的 对号 css
  .unselected .el-checkbox__input .el-checkbox__inner::after {
    // ::after {
    // 对号
    border: 2px solid red;
    // 不覆盖下面的 会 导致对号变形
    box-sizing: content-box;
    content: "";
    border-left: 0;
    border-top: 0;
    height: 7px;
    left: 3px;
    position: absolute;
    top: 1px;
    width: 3px;
    // }
  }
  /deep/ .el-checkbox__input .el-checkbox__inner::after {
    // 对号
    border: 2px solid #fff;
    // 不覆盖下面的 会 导致对号变形
    box-sizing: content-box;
    content: "";
    border-left: 0;
    border-top: 0;
    height: 7px;
    left: 3px;
    position: absolute;
    top: 1px;
    width: 3px;
    //
    transform: rotate(45deg) scaleY(1);
  }
}

文字超出换行

/deep/ .el-checkbox__label {
  word-break: normal;
  width: auto;
  display: inline-grid;
  white-space: pre-line;
  word-wrap: break-word;
  overflow: hidden;
  line-height: 14px;
}

一行显示一项

/deep/ .el-checkbox {
  width: 100%;
  margin-top: 20px;
}

表格里的多选框

// 多选
/deep/ .el-checkbox__inner{
  border: 2px solid #DCDFE6;
}
/deep/ .cell .el-checkbox__input .el-checkbox__inner {
  background-color: #fff;
  color: #ededed;
  border-color: #ededed;
  width: 16px;
  height: 16px;
}
/deep/ .el-checkbox {
  color: #a8a8a8;
}
/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #6c7c92;
}
/deep/ .el-checkbox__input .el-checkbox__inner::after {
  // 对号
  border: 2px solid #ededed;
  // 不覆盖下面的 会 导致对号变形
  box-sizing: content-box;
  content: "";
  border-left: 0;
  border-top: 0;
  height: 7px;
  left: 4px;
  position: absolute;
  top: 1px;
  width: 3px;
  //
  transform: rotate(45deg) scaleY(1);
}
// 选中后
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #fff;
  border-color: #6c7c92;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner::after {
  border: 2px solid #6c7c92;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  content: "";
  border-left: 0;
  border-top: 0;
  height: 7px;
  left: 4px;
  position: absolute;
  top: 1px;
  width: 3px;
  -webkit-transform: rotate(45deg) scaleY(1);
  transform: rotate(45deg) scaleY(1);
}