如何更改 v-text-field 中的占位符/标签颜色？

Question

我正在尝试更改标签和用户在v-text-field 上输入的文本的颜色。我已经尝试将 color 属性应用于它，但它只会改变底部分隔线的颜色。我应该怎么做才能得到我想要的？

这是我的实际代码：

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

注意：我删除了一些作为 v-model 的道具，只是为了提高可读性

This 和 this 是我得到的实际结果。但我想要的是始终以相同的blue lighten-1 Material Design 颜色获取“查找用户”文本（不仅在没有输入文本时），以及相同颜色的输入文本（不在黑色）。

谢谢！ :)

Answer 1

您可以覆盖 CSS 默认类：

.custom-placeholer-color input::placeholder {
  color: red!important;
  opacity: 1;
}

.custom-label-color .v-label {
  color: red;
  opacity: 1;
}

[编辑]

您可以更改输入颜色以使文本变为红色/任何其他颜色：

.custom-placeholer-color input,
.custom-label-color input{
  color: red!important;
}

Codepen 在这里更新：

https://codepen.io/fabiozanchi/pen/RmQbBd