更改 Vuetify 禁用复选框的背景颜色答案

【问题标题】：Change background color of Vuetify's disabled checkbox更改 Vuetify 禁用复选框的背景颜色
【发布时间】：2021-11-27 19:18:43
【问题描述】：

Here我得到了禁用复选框的示例。

如何为“on”禁用模式和“off”禁用模式设置自定义背景颜色？

【问题讨论】：

标签： html css vue.js vuetify.js

【解决方案1】：

使用动态禁用标签，如下所示：

:disabled="disabledValue"

然后你可以添加一个动态类，像这样：

:class="getColourDisabled(disabledValue)"

有一个功能：

getColourDisabled(disabledValue) {
  if (disabledValue) {
    return "myColourClass1"
  else {
    return "myColourClass2"
  }
}

使用 CSS 类，例如：

.myColourClass2 {
  background-color: #dedede !important;
}

【讨论】：

【解决方案2】：

复选框的图标颜色以这种风格为主题：

.theme--light.v-input--selection-controls.v-input--is-disabled:not(.v-input--indeterminate)
.v-icon {
  color: rgba(0,0,0,.26) !important;
}

要为所有复选框设置主题，复制该选择器，然后应用您自己的 color 和 !important 来覆盖默认主题：

.theme--light.v-input--selection-controls.v-input--is-disabled:not(.v-input--indeterminate)
.v-icon {
  color: rgba(128,5,5,.3) !important;
}

要单独为未选中的禁用框（“关闭禁用”状态）设置主题，请为图标名称添加选择器.mdi-checkbox-blank-outline：

.theme--light.v-input--selection-controls.v-input--is-disabled:not(.v-input--indeterminate)
.v-icon.mdi-checkbox-blank-outline {
  color: rgba(20,128,100,0.4) !important;
}

demo

【讨论】：