Question

默认情况下，vuetify对禁用的文本字段/项目应用浅灰色阴影。我如何将这种颜色覆盖到我想要的颜色？

目前我正在使用禁用选择器:disabled { color: #000000 !important; }，这只会改变文本字段文本颜色的颜色，我的表单中也有Dropdown和复选框。对此有什么解决方案吗？

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

选择所有后代并应用颜色。

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

Answer 3

我一直在尝试使用文本字段来覆盖类，但它不起作用，但是对于所有表单输入元素都有一个方便的道具，称为“ readonly”。使用“只读”而不是“禁用”。

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

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

3 个答案: