How to change / override the default color for disabled fields in Vuetify js?

Question

By default vuetify applies light grey shade for disabled textfields/items. How i can override this color to the color i want?

currently i am using disabled selector :disabled { color: #000000 !important; } which only helps with changing the color of textfields text color, i also have Dropdown and checkboxes in my form. is there any solution for this?

Answer 1

You could target

checkbox with .input-group--disabled.checkbox .input-group__input

and dropdown with .input-group--disabled.input-group--select label

.input-group--disabled.checkbox .input-group__input {
    color: #000 !important;
}

.input-group--disabled.input-group--select label {
    color: #000 !important;
}

---

Afaics most classes have --disabled suffix, so perhaps this could work for you (but I didn't test):

[class$="--disabled"],
[class*="--disabled "] * {
    color: #000 !important; 
}