0

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.

baitendbidz
  • 187
  • 3
  • 19
  • I think this has already been answered [here](https://stackoverflow.com/questions/62775729/how-to-remove-underline-from-v-text-filed-or-v-input-filed) – Jamba Apr 11 '23 at 09:47

1 Answers1

1

Use the plain variant:

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