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

Posted 2023-02-23

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

【英文标题】：How to change / override the default color for disabled fields in Vuetify js?

【发布时间】：2018-09-02 03:42:19

【问题描述】：

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

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

【参考方案1】：

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

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

【讨论】：

Readonly 不会阻止点击事件，所以在这种情况下它没有多大用处。

【参考方案2】：

你可以定位

带有.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; 

【讨论】：

感谢@traxo 第二次帮助我...请帮助我解决更多即将出现的问题：P

我为什么在开发版中看到样式更改，而在生产版中却没有？

【参考方案3】：

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

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