How to change the font-size of Vuetify inputs locally?

Question

Given the following Vuetify Textfield component

<v-text-field label="Label goes here" model-value="Value goes here"></v-text-field>

The general font-size is way too big for my application. I want to lower down the label and text size. For the text I tried

.v-text-field input {
    font-size: 10px;
}

but I can't figure out the CSS selector for the label, this didn't work for me

.v-text-field label {
    font-size: 8px;
}

The second problem is that this solution only works without the scoped attribute and I don't know why.

Do you have any ideas? This question might be a duplicate of How Do I change font-size in vuetify component

score 1 · Accepted Answer · answered May 09 '23 at 21:51

To answer your second question first, scoped CSS only applies to elements in the component. The :deep() selector allows you to target nested elements, i.e:

:deep(.v-text-field input) {
    ...
}

The documentation explains it quite neatly.

The label itself can be targeted like this:

:deep(.v-label.v-field-label.v-field-label--floating){
  --v-field-label-scale: 0.75em; /* .75em is the default value */
}

The elements inside v-input use relative sizes, so you can also set them together. Only the non-floating label (when no input is set) has to be unset for this to work:

:deep(.v-field){
  font-size: 12px;
}
:deep(.v-label.v-field-label){
  font-size: inherit;
}

not sure about the animation though...

Here is a playground where you can see how it changes together

How to change the font-size of Vuetify inputs locally?

1 Answers1