修改element-ui中Checkbox多选框（复选框）选中后颜色_element 全局自定义cheack 边框颜色

给复选框添加自定义样式

<el-checkbox v-model="checked1" label="此项正常显示蓝色" border></el-checkbox>
<el-checkbox v-model="checked1" label="此项显示自定义红色" class="myRedCheckBox" border></el-checkbox>
1
2

重写自定义checkbox样式

/* 设置带边框的checkbox，选中后边框的颜色 */
.myRedCheckBox.is-bordered.is-checked {
  border-color: #FF0000;
}

/* 设置选中后的文字颜色 */
.myRedCheckBox .el-checkbox__input.is-checked+.el-checkbox__label {
  color: #FF0000;
}

/* 设置选中后对勾框的边框和背景颜色 */
.myRedCheckBox .el-checkbox__input.is-checked .el-checkbox__inner, .myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: #FF0000;
  background-color:#FF0000;
}

/* 设置checkbox获得焦点后，对勾框的边框颜色 */
.myRedCheckBox .el-checkbox__input.is-focus .el-checkbox__inner{
  border-color: #FF0000;
}

/* 设置鼠标经过对勾框，对勾框边框的颜色 */
.myRedCheckBox .el-checkbox__inner:hover{
  border-color: #FF0000;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

效果如图所示

未选中时样式：

选中后的样式：