Question 45820 in CSS Question posted in
Some basic documentation can be found here.

How to remove underlined in vuetify v-select – CSS

I have a component for v-select, for example like this

<v-container>
    <v-row>
      <v-col>
        <v-select
          class="no-border"
          variant="underlined"
          label="Select"
          :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
        ></v-select>
      </v-col>
    </v-row>
  </v-container>

And i try to remove using css like this

.v-input--underlined .v-input__control {
  border: none !important;
  box-shadow: none !important;
}
Tags:

2

Answers


  1. 0

    try to add a custom class to your v-select component

    <v-select
  class="no-border no-underline"
  variant="underlined"
  label="Select"
  :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
></v-select>


    .no-underline .v-select__selections {
  border-bottom: none !important;
  box-shadow: none !important;
}
    Login or Signup to reply.
  2. 0

    I assume you mean the thin black border on the bottom of the select.

    In Vuetify 2, you have to override .v-input__slot::before:

    .theme--light.v-text-field.no-border > .v-input__control > .v-input__slot::before{
  border-width: 0;
}

    In Vuetify 3, you have to override .v-field__outline::before:

    .no-border .v-field--variant-underlined .v-field__outline::before{
  border-width: 0;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search