问题描述
我正在尝试更改用户在 v-text-field
上输入的标签和文本的颜色.我试过对它应用 color
道具,但它只会改变底部分隔线的颜色.我该怎么做才能如我所愿?
I'm trying to change the color of both the label and the text being inputted by the user on a v-text-field
. I've tried applying the color
prop to it, but it only changes de bottom divider's color. What should I do to get it as I want?
这是我的实际代码:
<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
的道具,只是为了增加可读性
NOTE: I've removed some props as the v-model
one, just to increase readability
这个 和 this 是我得到的实际结果.但我想要的是始终在相同的 blue lighten-1
Material Design 颜色上获取查找用户"文本(不仅在没有输入文本时),以及这样的输入相同颜色的文本(不是黑色).
This and this are the actual results i'm getting. But what i would like is to get the 'Find a user' text on the same blue lighten-1
Material Design color always (not only when there has been no text inputted), as well as such inputted text in the same color (not in black).
谢谢!:)
推荐答案
您可以覆盖 CSS 默认类:
You can do it overwriting the CSS default classes:
.custom-placeholer-color input::placeholder {
color: red!important;
opacity: 1;
}
.custom-label-color .v-label {
color: red;
opacity: 1;
}
您可以更改输入颜色以使文本为红色/任何其他颜色:
You can change the input color to have the text red/any other color:
.custom-placeholer-color input,
.custom-label-color input{
color: red!important;
}
Codepen 在这里更新:
Codepen updated here:
https://codepen.io/fabiozanchi/pen/RmQbBd
这篇关于如何更改 v 文本字段内的占位符/标签颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!