问题描述：
Element UI组件仅提供了按钮形式的 Checkbox 激活时的文本颜色修改的属性(text-color)以及激活时的填充色和边框色的修改属性（fill)，非按钮形式的如何修改这些样式呢?
解决方案：
提示：直接修改CSS属性，相关代码如下：
<template lang="pug">
.demo-checkbox
el-checkbox(
v-model="checked"
text-color="#000"
) 相关协议或者条款
</template>
<script>
export default {
data() {
return {
checked: true
};
}
};
</script>
<style lang="scss">
.demo-checkbox {
.el-checkbox__input.is-checked+.el-checkbox__label {
color: #8c8c8c;
}
.el-checkbox .el-checkbox__label {
color:#8c8c8c;
font-size: 14px;
line-height: 22px;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
border-color: lightgreen;
background-color:lightgreen;
}
.el-checkbox__input.is-focus .el-checkbox__inner{
border-color: lightgreen;
}
.el-checkbox__inner:hover {
border-color: lightgreen;
}
}
</style>
最终效果
文章来源：https://www.toymoban.com/news/detail-520201.html
注意事项
我在写style样式的时候并没有加scoped属性，有时候加了该属性修改样式的时候不生效，要用到样式穿透，样式穿透的方法：文章来源地址https://www.toymoban.com/news/detail-520201.html
- css 使用 >>>
- less 使用 /deep/
- scss 使用 ::v-deep
到了这里，关于Element UI组件中el-checkbox组件样式的修改的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
