[Vuejs]-How to change font-size of "v-text-field" in vuetify?

by

0👍

The problem is, that after render the input get this css style:

.v-input input {
    max-height: 32px;
}

To solve this, you simply need to overwrite this. If you don´t want to override this for every input, just add another class to your v-text-field:

<v-text-field
  color="var(--color4)"
  class="px-15 my-class"
>

… and then use it like this:

.v-input.my-class input {
    max-height: 32px;
}

Edit: Looks like you also need to override the following style:

.v-input .v-label {
    height: 20px;
    line-height: 20px;
    letter-spacing: normal;
}

This is the style of the label, you need to increase height and line-height. Another override needs to be done at:

.v-text-field input {
    flex: 1 1 auto;
    line-height: 30px;
    padding: 8px 0 8px;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

The line-height needs to be increased.

As your html in your slot is only displayed in the slot, line-height and max-width from parents affect the visible space.

0👍

you can use class="text-h3" inside 

<v-text-field
 v-model="item"
 label="label"
 class="text-h3"
></v-text-field>

Leave a comment