Как изменить цвет шрифта заполнителя v-text-field в Vue? - PullRequest
Новая
       6

Как изменить цвет шрифта заполнителя v-text-field в Vue?

1 голос
/ 07 мая 2020

У меня в коде 

<v-text-field hide-details class="search-field" id="name-input" placeholder="Search by name" v-model="search"></v-text-field>

, и я хочу изменить цвет шрифта заполнителя. У меня css: 

  .search-field input::placeholder{
    color: red!important;
  }

Но не работает.
enter image description here
Внутри v-text-field это input, как показано ниже:

enter image description here

Может ли кто указать, где я ошибся? Спасибо!

1 Ответ

2 голосов
/ 07 мая 2020

Вы можете изменить цвет заполнителя следующим образом: 

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/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/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>

Просто следуйте селекторам, которые вы найдете в консоли разработчика. Чтобы перезаписать значения, вам нужно быть более "специфичными c", чем те, которые созданы Vuetify .

...