16

I use v-text-field, and v-select, with vue-loader.
I tried to change font-size, but I could not. How Do I change font-size?

My code likes this.

<template lang="pug">
p label-1
v-text-field(...)

p label-1
v-text-field(...)
</template>

<stylelang="sass">
.input-group .input-group__input
  font-size: 12px !important
</style>

<stylelang="sass"scoped>
.p
  font-size: 12px
</style>

developer tool screenshot

tomlla
  • 519
  • 1
  • 6
  • 15

7 Answers7

27

To change the font size for a single component, such as a text field, application-wide:

<style>
  .v-text-field input {
    font-size: 1.2em;
  }
</style>

To change the font size within another component, use a scoped style:

<style scoped>
  .v-text-field input {
    font-size: 1.2em;
  }
</style>

For a more generic approach, you can also target multiple component types using .v-input

.v-input {
    font-size: 1.2em;
}

or 

.v-input input {
    font-size: 1.2em;
}

Finally, you can also target the labels as well. 

.v-input .v-label {
    font-size: 1.2em;
}
Steven Spungin
  • 27,002
  • 5
  • 88
  • 78
  • this styles did not help me on vuetify 2x, the best way to modify the font size on a is using slots to override default label and use custom styles, please see docs https://vuetifyjs.com/en/api/v-text-field/#slots – Fernando Torres Jun 25 '21 at 02:33
13

You could create a folder called sass, scss or styles in your src directory with a file named variables.scss or variables.sass. And add scss variable $input-font-size: 12px to the variables file. The vuetify-loader will automatically bootstrap your variables into Vue CLI's compilation process, overwriting the framework defaults.

$font-size-root: 14px;
$input-font-size: 14px;

Here you could find details.

Here you could find an example of the variables file.

Anastassiya Grinvald
  • 322
  • 2
  • 7
  • 1
    Explanation to the query is clear :) also important is if you create the file for first time, re-serve the application. – Kunal Panchal Oct 22 '20 at 09:08
7

Using VueJS deep selector worked for me:

<style lang="css" scoped>

.v-text-field >>> input {
    font-size: 0.8em;
    font-weight: 100;
    text-transform: capitalize;
}
.v-text-field >>> label {
    font-size: 0.8em;
}
.v-text-field >>> button {
    font-size: 0.8em;
}

</style>
DevonDahon
  • 7,460
  • 6
  • 69
  • 114
2

or you can create a div class and point this out. 

<style lang="stylus" scoped>
  .element
    color white    
    padding 0
    margin 0
    font-size 150%
</style>

.element
      | 一共 : {{ sum("quantity") }} ，....
Jeff Bootsholz
  • 2,971
  • 15
  • 70
  • 141
2

I'am not sure what to use with sass, but for scss in vuetify you have to use the ::v-deep selector instead of >>>:

<style lang="scss" scoped>

.v-text-field ::v-deep input {
    font-size: 0.8em;
    font-weight: 100;
    text-transform: capitalize;
}

.v-text-field ::v-deep label {
    font-size: 0.8em;
}

.v-text-field ::v-deep button {
    font-size: 0.8em;
}
</style>
milchreis
  • 79
  • 7
1

Set the font-family on body. If you are importing the Vuetify stylus entry, main.styl overwrite the $font-family variable.

Nisal Edu
  • 7,237
  • 4
  • 28
  • 34
1

Use an asterisk selector * to match all descendants of an element or a component and then apply the font size like following:

.font-class-name * {
   font-size: 14px;
}

Then

<v-text-field class="font-class-name"></v-text-field>

Hope this works.

Babaktrad
  • 164
  • 1
  • 15