`<v-text-field
id="loginPasswordId"
ref="password"
v-model="password"
class="login-input"
dense
:disabled="loading"
:hint="hello world"
:loading="loading"
maxlength="16"
outlined
:rules="[rules.required,rules.passwordLength]"
:type="passwordShow ? 'text' : 'password'"
@keyup.enter="submit">
</v-text-field>`
How to change color of hint attribute in vue.js ? Is there anyone to help ?
You can add css style for hint class:
.v-messages__message {
color: red !important;
}
You can style .v-messages__message:
new Vue({
el: '#demo',
data() {
return {
password:''
}
}
}).v-messages__message {
color: violet;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.5.8/vuetify.min.js" integrity="sha512-4WwTDsHz4Dr/FqjqVTT4Xm9K0y/4FQDDjIzGQyKMLaYnxgjh2vyy8rTNh7QUg9pmCbBng5nnXzRlebkGMIIQQg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.5.8/vuetify.min.css" integrity="sha512-OLLHV7EvoUTcPYtFNXC73+SvDC4l/KoEd1YgNZXySxj/7XVBaHEdoqsITIgC0mJd+p1kWe/LxCR+0wCVf8LpOQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="demo">
<v-text-field
id="loginPasswordId"
ref="password"
v-model="password"
class="login-input"
dense
hint="hello"
loading="loading"
maxlength="16"
outlined
type="passwordShow ? 'text' : 'password'"
@keyup.enter="submit">
</v-text-field>
</div>