Change background color of Vuetify's disabled checkbox-CodePudding

Here I got example of disabled checkbox.

How can I set custom background color for "on" disabled mode and for "off" disabled mode?

CodePudding user response：

Use a dynamic disabled tag, like this:

:disabled="disabledValue"

Then you can add a dynamic class, like this:

:class="getColourDisabled(disabledValue)"

with a function:

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

With CSS classes, e.g.:

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

CodePudding user response：

The icon color of the checkbox is themed by this style:

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

To theme all checkboxes, copy that selector, and apply your own color with !important to override the default theme:

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

To theme the unchecked disabled box (the "off disabled" state) separately, add the selector for the icon name .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