Vuetify custom styling of vuetify components like v-textarea with css

user_10808467 0
Viewed 974

How can I target the underlying html textarea of a vuetify v-textarea with css? In my case I want to change the line-height, font-family, color and more of the v-textarea. It doesn't work like this:

<v-textarea class="custom-textarea"></v-textarea>

.custom-textarea {
  line-height: 1;
  color: red;
}

I also tried several other selectors like v-textarea, .v-textarea, v-text-field__slot but none of these worked either. What is the right selector for the textarea?

vuetify.js vue.js css
3 Answers
user_43326450 
.custom-textarea textarea {
  line-height: 1;
  color: red;
}
user_116416140

Set id prop of text-area and apply css style by id.

<v-textarea id="input-7-2"></v-textarea>

#input-7-2 {
  color:white;
  background-color: green;
  line-height:1;
}

Codepen demo

user_123788990
Related