更改 Vuetify 中所有只读字段的背景颜色答案

【问题标题】：Change all read only fields background color in Vuetify更改 Vuetify 中所有只读字段的背景颜色
【发布时间】：2020-01-09 09:55:43
【问题描述】：

我的目标是让我的用户能够区分所有只读输入字段。目前，在 Vuetify 2.0.12 中，只读 <v-text-field> 和 <v-textarea> 组件与非只读字段无法区分。

我想全局更改所有具有 readonly 属性的 <v-text-field> 和 <v-textarea> 组件的背景颜色和文本颜色。

例子：

background-color = yellow lighten-3

text color = black

这需要适用于浅色/深色主题，因为我的应用程序允许用户选择他们的主题。

我的 CSS/Sass 知识非常缺乏，所以对于这样一个初级问题，我深表歉意。也请随意提出更好的方法。向我的用户“表明”该字段为只读字段的好方法是什么？

【问题讨论】：

标签： css vue.js sass styles vuetify.js

【解决方案1】：

您可以像这样将属性分配给只读选择器：

.v-textarea textarea[readonly="readonly"] {
    background-color: yellowgreen
}
.v-text-field input[readonly="readonly"] {
    background-color: yellowgreen
}

如果您的组件样式是作用域的，请在之前添加/deep/：/deep/ .v-textarea ...

【讨论】：

这个解决方案有几个副作用。创建一个项目并添加一个<v-select> 元素，您会注意到它的背景颜色也是黄绿色。有什么方法可以使这个特定于 <v-text-field> 和 <v-textarea> 组件？

【解决方案2】：

@ManUtopiK 提出的解决方案在其他组件方面存在一些问题，尤其是在选择方面。这应该可以解决它们

.v-textarea textarea[readonly="readonly"] {
    background-color: #f0f0f0;
    color: gray;
}
:not(.v-select).v-text-field input[readonly="readonly"] {
    background-color: #f0f0f0;
    color: gray;
}

【讨论】：