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

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

2 个答案: