Reputation: 1340
I have
<v-text-field hide-details class="search-field" id="name-input" placeholder="Search by name" v-model="search"></v-text-field>
in my code, and I want to change the font color of the placeholder. In my css:
.search-field input::placeholder{
color: red!important;
}
But it doesn't work.
Inside the v-text-field
it is an input
as shown below:
Could anyone point out where I did wrong? Thank you!
Upvotes: 2
Views: 7179
Reputation: 8329
You can change placeholder color like this:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
search: ''
}
})
.theme--light.v-input.search-field input::placeholder {
color: green;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-content>
<v-container>
<v-text-field hide-details class="search-field" id="name-input" placeholder="Search by name" v-model="search"></v-text-field>
<v-text-field hide-details class="search-field-2" id="name-input" placeholder="Search by name" v-model="search"></v-text-field>
</v-container>
</v-content>
</v-app>
</div>
Just follow the selectors you find in the dev console. To overwrite the values you need to be more "specific" than those created by Vuetify.
Upvotes: 2