How to remove underline from v-text filed or v-input filed

Question

I try to remove underline from v-input, v-text or v-autocomplete fileds in Vuetify, but I couldn't find how

Is there any way to remove underline from v-input, v-text or v-autocomplete fileds in Vuetify.

Answer 1

On v-text add "solo" and "flat" prop. works on v-input and v-autocomplete.

<v-text-field flat solo></v-text-field>

Flat: description from vuetify documentation "Removes elevation (shadow) added to element when using the solo or solo-inverted props"

There is a playground in vuetify which can help you as well. https://vuetifyjs.com/en/components/text-fields/

Answer 2

Use the deep selector as discussed here. You have to override the v-input__slot::before class like that:

>>> .v-input__slot::before {
  border-style: none !important;
}

It removes the underlines from the elements you specified in the question. If you do not want to remove all the underlines in a component simultaneously, but only on some specified, do it like that:

.some-style >>> .v-input__slot::before {
  border-style: none !important;
}

And remove the underlines only on the elements of your choice:

<v-text-field class="some-style"></v-text-field>

Answer 3

Spend sometime on this one you need to override the before css style

.v-text-field > .v-input__control > .v-input__slot:before {
  border-style: none; 
}