問題描述：
Element UI組件僅提供了按鈕形式的 Checkbox 激活時(shí)的文本顏色修改的屬性(text-color)以及激活時(shí)的填充色和邊框色的修改屬性（fill)，非按鈕形式的如何修改這些樣式呢?
解決方案：
提示：直接修改CSS屬性，相關(guān)代碼如下：
<template lang="pug">
.demo-checkbox
el-checkbox(
v-model="checked"
text-color="#000"
) 相關(guān)協(xié)議或者條款
</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>
最終效果
文章來源：http://www.zghlxwxcb.cn/news/detail-520201.html
注意事項(xiàng)
我在寫style樣式的時(shí)候并沒有加scoped屬性，有時(shí)候加了該屬性修改樣式的時(shí)候不生效，要用到樣式穿透，樣式穿透的方法：文章來源地址http://www.zghlxwxcb.cn/news/detail-520201.html
- css 使用 >>>
- less 使用 /deep/
- scss 使用 ::v-deep
到了這里，關(guān)于Element UI組件中el-checkbox組件樣式的修改的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
