CODEWITHSUNDEEP
vue.jsvuetify.js
Drdilyor
Drdilyor

Reputation: 1377

"Transparent" v-text-field in vuetify?

I need to create v-text-field without background, borders or shadows, is that possible? Docs specify only these types:

enter image description here

But neither of them suit my needs.

What's the simplest way to achieve this?

I tried this but it didn't remove the background (in dark mode).

Upvotes: 0

Views: 2437

Answers (2)

PyKKe
PyKKe

Reputation: 373

In Vuetify 3 you can do this:

<v-text-field
  variant="plain"
></v-text-field>

Upvotes: 0

Eduardo
Eduardo

Reputation: 1321

You can override default v-text-field styles in your css.

<v-text-field
    class="text-field-transparent"
    solo
    flat
/>

.text-field-transparent  .v-input__slot {
  background: transparent !important;
}

Upvotes: 1

Related Questions