如何自定义Vuetify禁用复选框选中与未选中模式的背景色

实现思路 #

直接覆盖Vuetify复选框对应的禁用状态CSS选择器，分别匹配选中/未选中两种状态即可，建议给目标复选框加自定义类名，避免全局样式污染。

代码示例 #

1. 模板部分

给需要自定义的v-checkbox添加自定义类：

<template>
  <v-checkbox
    class="custom-disabled-checkbox"
    v-model="checkValue"
    disabled
    label="禁用复选框示例"
  />
</template>

2. 样式部分

如果样式写在带scoped属性的style块内，需要使用深度选择器命中Vuetify内部元素，以下适配Vue3 + Vuetify3场景：

<style scoped>
/* 禁用 + 未选中状态 */
.custom-disabled-checkbox:deep(.v-selection-control__input input:disabled:not(:checked) + .v-checkbox__icon) {
  background-color: #d0d0d0; /* 替换为你需要的未选中背景色 */
  opacity: 1; /* 可选：移除默认禁用状态的半透明效果 */
  color: transparent; /* 可选：调整边框/图标颜色 */
}

/* 禁用 + 选中状态 */
.custom-disabled-checkbox:deep(.v-selection-control__input input:disabled:checked + .v-checkbox__icon) {
  background-color: #82b1ff; /* 替换为你需要的选中背景色 */
  opacity: 1;
  color: #fff; /* 可选：调整对勾图标颜色 */
}
</style>

适配说明 #

• 如果是Vuetify2版本，将深度选择器替换为::v-deep，内部类名调整为.v-input--selection-controls__input .v-icon即可生效
• 如需全局修改所有禁用复选框的样式，去掉自定义类名、将样式写在不带scoped的全局样式文件中即可

内容的提问来源于stack exchange，提问作者Kirill