'Vuetify : How to set selected item background color in v-select

I have this v-select and I want to change the background color of the selected item to 'white' and keep the text color in blue

enter image description here

I have tried to add item-color attribute to my v-select but it changes the background and the text color so we can't see the text anymore. I also tried to add a scoped style like this but it doesn't work :(

.v-list-item--active {
  background-color: white !important;
}

Any one can help ?

cssnuxt.jsvuetify.jsv-select


Solution 1:[1]

I achieved this by using the item prop of the v-select and placing a v-list-item inside.

<v-select
  :items="[1,2,3]"
  multiple
>
  <template v-slot:item="{item, on, attrs}">
    <v-list-item v-on="on">
      <v-list-item-action>
        <v-simple-checkbox
          :value="attrs.inputValue"
          v-on="on"
          color="primary"
          :ripple="false"
        ></v-simple-checkbox>
      </v-list-item-action>
      <v-list-item-content>
        <v-list-item-title :class="attrs.inputValue ? 'primary--text' : ''">
          {{ item }}
        </v-list-item-title>
      </v-list-item-content>
    </v-list-item>
  </template>
</v-select>

attrs.inputValue holds the selected state of the item which I use to set the primary--text class on the v-list-item-title.

FYI: The :ripple="false" attribute on the v-simple-checkbox is necessary to prevent errors in the console, because there is an open bug with the ripple directive on this component.

Solution 2:[2]

Don't really know if its the effect that you're looking for but to preserve the dark mode you should instead remove the opacity from the active element

.v-list-item--active::before { opacity: 0 }

Keep in mind that this rule applies to all list items active.

If you want to do it on a single select or only on selects, you should target the elements that you want


/* Examples */

.v-select .v-list-item--active::before { opacity: 0 }
.v-select--is-multi .v-list-item--active::before { opacity: 0 }
.my-pale-select  .v-list-item--active::before { opacity: 0 }

Solution 3:[3]

Try this one:

.v-list .v-list-item--link:before{
  background-color: #fff !important;
}

Here is codepen simple.

Solution 4:[4]

For me, styling the item inside the v-select works only if I remove scoped from the style block:

<style>
  .v-list-item--active {
     background-color: white;
  }
</style>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jay Fridge
Solution 2 Joel Filipe Proença Rodrigues
Solution 3 Mohsen
Solution 4

Related Questions