Im trying to customize the font size of the label of a v-text-field. The problem im encountering is that when the field is clicked, the label normally transitions to the top of the field and becomes smaller but in my case, its size is set to the defined value again after the transition finishes. You can see here how the text "pops up" when the transition ends : https://play.vuetifyjs.com/#eNpdj8tOwzAQRX/l4k1AIg1sS4rEdxAWJp0gS7Zj2ZOoNMq/149Uaruxfa9GZ46/FxF833w5t5snEnvRMhmnJdNnZ4F2rqVz+ZlDP1qWypLfqlwynbgeFOkj5tqMR9KHTpjw1wlo+ZuTlDKm5gpqHkmpKYva5kYgxtB75RiBeCoeyrjRMxZ4GrBi8KNBFd2rNA5EbmDE7TikieeqeknQgtmQ/K/L93Z38jFl33jnoiQsRXqIwnVQZ9rj/c2d8FREpOWPNLDmLRtZrK920jofPxeSQHc2
Does anyone know how i can prevent this from happening?
Your rule will override the font size of both the label and the floating label. Here we can set their font size separately via the following:
/* label before click */
.v-text-field .v-label.v-field-label:not(.v-field-label--floating) {
font-size: 10px !important;
}
/* floating label (after click) */
.v-label.v-field-label--floating {
font-size: 7.5px;
}
The default size of unfocused label is 1rem and the floating label is 0.75rem, so in the example above, I set the font size of floating label as 7.5px