CODEWITHSUNDEEP
cssvuetify.js
gciavirella
gciavirella

Reputation: 41

How can I change the placeholder/label color inside a v-text-field?

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

Answers (1)

Fabio Zanchi
Fabio Zanchi

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

Related Questions