如何更改Vue中v-text-field占位符的字体颜色？答案

【问题标题】：How to change the font color of placeholder of v-text-filed in Vue?如何更改Vue中v-text-field占位符的字体颜色？
【发布时间】：2020-08-22 05:18:37
【问题描述】：

我有

<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;
  }

但它不起作用。

在v-text-field 内部是一个input，如下所示：

谁能指出我哪里做错了？谢谢！

【问题讨论】：

字体 size 还是 color？尝试在red 和!important 之间放置一个空格。 Ed：好的，我刚刚检查了一下空间，没关系。不过看起来还是更好看
使用浏览器的开发工具检查元素的样式。很有可能，Vuetify 正在为占位符样式提供更具体的选择器
颜色。我试过了，但它不起作用。很奇怪，我试过 stackoverflow.com/questions/56262429/…，它在 Codepen 中工作，但在我的代码中不起作用。

标签： javascript html css vue.js vuetify.js

【解决方案1】：

您可以像这样更改占位符颜色：

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>

只需按照您在开发控制台中找到的选择器进行操作即可。要覆盖这些值，您需要比 Vuetify 创建的值更“具体”。

【讨论】：