vue.js - 如何在 el-checkbox 元素库元素中居中打勾

Question

任何人都可以建议我如何设置 el-checkbox 元素库（https://element.eleme.io/#/en-US/component/checkbox）元素的样式以更改复选框的高度和宽度并在中心打勾复选框。

我已经更改了文本和复选框的大小，但现在刻度没有居中。

Answer 1

复选标记选择器是.el-checkbox__inner::after，并且它是定位的absolute，因此您必须相应地设置height和left。

下面的 CSS 可以为复选框的各个部分设置样式：

.el-checkbox,
.el-checkbox__label {
  font-size: 22px;
}

/* checkbox */
.el-checkbox__inner {
  height: 22px;
  width: 22px;
}

/* check mark */
.el-checkbox__inner::after {
  height: 14px;
  left: 8px;
}

演示