Change all read only fields background color in Vuetify

Question

My goal is to make all read only input fields distinguishable for my users. Currently, in Vuetify 2.0.12 readonly <v-text-field> and <v-textarea> components are indistinguishable from non read only fields.

I would like to globally change the background color, and text color of all <v-text-field> and <v-textarea> components that have the readonly prop.

example :

background-color = yellow lighten-3

text color = black

This needs to work for both light/dark themes as my application allows the user to choose their theme.

My CSS/Sass knowledge is extremely lacking so I apologize for such a rudimentary question. Feel free to suggest a better approach as well. What is a good way to "signal" to my users that this field is readonly?

score 4 · Answer 1 · answered Sep 06 '19 at 14:15

4

You can assign properties to a readonly selector like that:

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

If your component style is scoped, add /deep/ before : /deep/ .v-textarea ...

answered Sep 06 '19 at 14:15

ManUtopiK

4,495
3
38
52

There are a couple side effects to this solution. Create a project and add a `````` element, you will notice the background color for this is also yellowgreen. Any way to make this specific to just `````` and `````` components? – Jake Perkins Sep 06 '19 at 15:10

Alberto · Answer 2 · 2021-09-27T08:19:58.357

1

The solution proposed by @ManUtopiK has some issues with other components, especially with selects. This should fix them

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

edited Sep 27 '21 at 08:19

answered Jul 02 '20 at 08:41

Alberto

383
7
18

score 1 · Answer 3 · answered Dec 19 '22 at 18:22

I know the OP is using Vuetify 2.0.12 but I landed here from a Google search and I'm using Vuetify 3.0.5. This is what I used in Vuetify 3.0.5 to target the v-text-field's outlined styling when readonly:

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

Change all read only fields background color in Vuetify

3 Answers3

Linked