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材质设计颜色上获得“查找用户”文本（不仅当没有输入任何文本时），而且还要以相同的颜色获得这样的输入文本（不是黑色的。）

谢谢！：）

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

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

1 个答案: