修改el-checkbox的默认样式,给选中的复选框的右上角打个对勾。
<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);
}