Search code examples
htmlcssvuetify.jsvuetifyjs3

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"/>