1

I'm using Vuetify trying to approach this textfield style. I'm using outlined textfield provided them with a simple custom style, but I can't change its label position. Is there any way I could change the label position and the "interval" where the line starts and ends?

I was trying searching in their documentation and found this session, but no luck while changing $text-field-outlined-label-position-x or $text-field-outlined-label-position-y.

edit: this is the best I could reach, which is actually the default outlined textfield with rounded borders.

Thanks in advance!

Nats
  • 31
  • 5

1 Answers1

0

I figured it out by myself.

We can change the margins on the Vuetify classes of v-text-field to change its position. Just change it by your own margin and everything works!

.v-text-field__slot {
    margin-left: 20px;
}

.v-input__slot > fieldset > legend {
    margin-left: 20px;
}
Nats
  • 31
  • 5