How to change Vuetify Text fields text input color

user_7236607 0
Viewed 20104

How to change Vuetify v-text-fields input text color. I tried many ways but none of them is worked.

enter image description here

I tried to change the "Hello" text to red. It is not working.

vuetify.js textfield
6 Answers

if you want to change color to white just add props dark to v-text-input enter image description here

user_119974230

There are few ways to do this.

One convenient way is to set a class on the v-text-field, then using specificity set the color of the input.

Note that you need to use the !important flag when not editing the Vuetify theme directly.

In the template,

    <v-text-field class="text-green"></v-text-field>

In the CSS (e.g. style tag),

    .text-green input {
      color: green !important;
    }

Live Snippet:

new Vue({
  el: '#app',
  data: () => ({
    name: 'John'
  })
})
.text-green input{
  color: green !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<div id="app">
  <v-app>
    <v-text-field class="text-green" v-model="name"></v-text-field>
  </v-app>
</div>

user_41118620

What worked for me is exporting the themes colors as css variables (custom properties). Code below

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

export default new Vuetify({
  theme: {
    options: {
      customProperties: true,
    },
  },
})

and then in the scss using the following code:

 .v-text-field {
input {
  color: var(--v-primary-base);
}

}

user_96717390

This works:

<v-text-field class="text-input-blue"/>

In combination with CSS:

.text-input-blue .v-text-field__slot input {
   color: #00f !important;
}

One of the downsides of Javascript frameworks is that the CSS is often hard to customize.

user_38766380

In case you are using v-custom the below scss override will work for you:

<div class="input-text-wrapper">
    <v-text-field class="input-text"/>
</div>

Style:

<style scoped lang="scss">

    .input-text {
        ::v-deep {
            .v-text-field {
                input {
                    color: blue;
                }
            }
        }
    }
</style>
user_59733770

You need to create a file related to CSS styles in the Styles section and name it Override. In that file, you can make any desired changes you need. Put the following code in that file, you can change the color of the border:

.v-text-field {
    input {
      color: rgba(169, 169, 169, 0.33);
    }
  }
user_93535390
Related