Remove underline from underlined Vuetify text-field

Given the Vuetify v-text-field component

( Playground )

<v-text-field label="Label" clearable variant="underlined" density="compact" hide-details="auto" color="primary" />

I want to remove the underline from it so I have a blank input without borders. I tried custom CSS like

• text-decoration: none
• border-bottom: none
• border-bottom-color: transparent

but that didn’t work. Do you have any ideas?

Sidenote:

This input fills a slot inside a table cell and it’s a requirement to get rid of the underline because there already is a cell border.

>Solution :

Use the plain variant:

<v-text-field label="Label" clearable variant="plain" density="compact" hide-details="auto" color="primary"/>