本文介绍了如何更改 v 文本字段内的占位符/标签颜色?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试更改用户在 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 文本字段内的占位符/标签颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-27 21:47
查看更多