Reputation: 41
I'm trying to change the color of both the label and the text being inputted by the user on a v-text-field
. I've tried applying the color
prop to it, but it only changes de bottom divider's color. What should I do to get it as I want?
This is my actual code:
<v-text-field label="Search here!" color="blue lighten-1">
<template slot="append">
<v-btn class="blue--text text--lighten-1" flat>
<v-icon>search</v-icon>
</v-btn>
</template>
</v-text-field>
NOTE: I've removed some props as the v-model
one, just to increase readability
This and this are the actual results i'm getting. But what i would like is to get the 'Find a user' text on the same blue lighten-1
Material Design color always (not only when there has been no text inputted), as well as such inputted text in the same color (not in black).
Thanks! :)
Upvotes: 4
Views: 18372
Reputation: 945
You can do it by overwriting the CSS default classes:
.custom-placeholder-color input::placeholder {
color: red !important;
opacity: 1;
}
.custom-label-color .v-label {
color: red;
opacity: 1;
}
[EDIT]
You can change the input color to have the text red/any other color:
.custom-placeholder-color input,
.custom-label-color input{
color: red !important;
}
Codepen updated here:
https://codepen.io/fabiozanchi/pen/RmQbBd
Upvotes: 7