如何更改/覆盖 Vuetify js 中禁用字段的默认颜色？

Question

默认情况下，vuetify 为禁用 textfields/items 应用浅灰色阴影。如何将此颜色覆盖为我想要的颜色？

目前我正在使用禁用的选择器:disabled { color: #000000 !important; }，它只有助于更改文本字段文本颜色的颜色，我的表单中也有下拉列表和复选框。有解决办法吗？

Answer 1

您可以定位

带有 .input-group--disabled.checkbox .input-group__input

的复选框

和带有 .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 大多数类都有 --disabled 后缀，所以也许这对你有用（但我没有测试）：

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

Answer 2

Select 所有后代并应用颜色。

.input-group__input *
  color: rgba(0,0,0,0.87) !important

Answer 3

我一直在尝试用文本字段来覆盖 class 但它不起作用，但是对于所有表单输入元素都有一个名为 'readonly' 的便利道具。使用 'readonly' 而不是 'disabled'.

<v-textarea placeholder="Notes" :readonly="true"></v-textarea>
<v-select :items="['Mango', 'Apple']" label="Filled style" :readonly="true"></v-select>

如何更改/覆盖 Vuetify js 中禁用字段的默认颜色？

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

vuejs2

vuetify.js