自定义el-checkbox样式

1,221 阅读1分钟

修改el-checkbox的默认样式,给选中的复选框的右上角打个对勾。

对勾.png

<el-checkbox-group v-model="xxx">
  <el-checkbox
    v-for="item in xxxList"
    border
    :key="item.id"
    :label="item.text"
  >
    {{ item.text }}
  </el-checkbox>
</el-checkbox-group>
  .el-checkbox {
    position: relative;
    text-align: center;
    background-color: #fff;
    border-radius: 2px;

  }
  .el-checkbox.is-checked {
    color: #1890ff;
    border: 1px solid #1890ff;
  }
  .is-checked:before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    border: 7px solid #1890ff;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  .is-checked:after {
    content: '';
    width: 1px;
    height: 3px;
    position: absolute;
    right: 1px;
    top: 0;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-left-color: transparent;
    transform: rotate(45deg);
  }