Vue使用 element UI 修改checkbox选择框的默认颜色以及字体颜色
项目场景:解决方案:首先要先去掉 style lang=“scss” 里面的scoped,然后才会生效对应修改就行// 修改选择框颜色.el-checkbox__input.is-checked .el-checkbox__inner,.el-checkbox__input.is-indeterminate .el-checkbox__inner {border-color: #f32823 !i
·
项目场景:
解决方案:
首先要先去掉 style lang=“scss” 里面的scoped,然后才会生效
对应修改就行
// 修改选择框颜色
.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__inner:hover {
border-color: #f32823 !important;
}
.el-checkbox__input.is-focus .el-checkbox__inner {
border-color: #f32823 !important;
}
.el-checkbox {
color: #111;
margin-right: 30px;
font-size: 16px;
margin-bottom: 18px;
}
// 修改选择框大小
.el-checkbox__inner {
width: 16px;
height: 16px;
}
// 修改选择label字体颜色
.el-checkbox__input.is-checked + .el-checkbox__label {
color: #111 !important;
}
// 修改中心对号大小以及位置
.el-checkbox__inner::after {
left: 4px;
height: 9px;
width: 5px;
top: 0;
}
更多推荐
已为社区贡献9条内容
所有评论(0)