如何更改 v 文本字段内的占位符/标签颜色？

Question

我正在尝试更改用户在 .txt 文件上输入的标签和文本的颜色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，只是为了增加可读性

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

谢谢！:)

Answer 1

您可以通过覆盖 CSS 默认类来做到这一点：

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

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

[编辑]

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

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

Codepen 在这里更新：

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