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

Question

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

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

例：

background-color = yellow lighten-3
text color = black

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

我的 CSS/Sass 知识非常缺乏，所以我为这样一个基本的问题道歉。您也可以随意提出更好的方法。向我的用户"发出"信号"此字段是只读的好方法是什么？

Answer 1

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

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

如果您的组件样式已限定范围，请在 之前添加/deep/：/deep/ .v-textarea ...

Answer 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;
}

Answer 3

我知道OP使用的是Vuetify 2.0.12，但我从谷歌搜索中登陆这里，我使用的是Vuetify 3.0.5。这是我在 Vuetify 3.0.5 中使用的，用于在只读时针对 v-text-field 的轮廓样式：

.v-field__field:has(input[readonly]) + .v-field__outline .v-field__outline__start,
.v-field__field:has(input[readonly]) + .v-field__outline .v-field__outline__notch::before,
.v-field__field:has(input[readonly]) + .v-field__outline .v-field__outline__notch::after,
.v-field__field:has(input[readonly]) + .v-field__outline .v-field__outline__end {
border-color: red;
}