Vue使用 element UI 修改checkbox的默认颜色

Vue使用element UI 修改checkbox的颜色eleme默认的颜色的#409EFF 类蓝色的颜色，官方文档中是没有关于如何修改选中以及hover样式的。那么怎么修改呢？answer：1.先把内容放上去，然后F12打开检查2. 选择多选框查看elements的css样式默认样式:修改时，审查到CheckBox元素，获取到class名，进行修改。css代码如下：.el-checkbox_

fail-request

5412人浏览 · 2020-11-05 17:00:48

fail-request · 2020-11-05 17:00:48 发布

Vue使用element UI 修改checkbox的颜色

eleme默认的颜色的#409EFF 类蓝色的颜色，官方文档中是没有关于如何修改选中以及hover样式的。那么该怎么修改呢？

默认样式: 在这里插入图片描述
修改时，审查到CheckBox元素，获取到class名，进行修改。

css代码如下：

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
border-color: #F32823 !important;
background-color: #F32823 !important;
}
.el-checkbox__input.is-checked+.el-checkbox__label{
color: #F32823 !important;
}
.el-checkbox__inner:hover{
border-color: #F32823 !important;
}
.el-checkbox__input.is-focus .el-checkbox__inner {
border-color: #F32823 !important;
}

注释：不要在加注scoped的style标签中进行修改。（不需要加scoped）

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^