CODEWITHSUNDEEP
background-colorvuetify.jsselectedv-select
Marc
Marc

Reputation: 411

Vuetify: How to specify the background-color of a selected item in v-select component

I have a v-select widget (combobox / select) in a Vue application. When I open it and hover over an option, the background-color of the option is highlighted (currently light-grey). I want the background-color to have a different color when the mouse arrow hovers over an option. I can not see a property of the v-select widget that supports this. Is there a way to achieve this?

v-select::hover {
  background-color: "#00857A";
}

<v-select
    append-icon="../assets/img/sy-arrow-chevron-down.svg"
    background-color="white"
    :height="68"
    item-text="label"
    item-value="key"
    class="mr-3"
    v-model="type"
    :width="421"
    :items="searchCriteria"
    @change="performSearch()"
  ></v-select>

Upvotes: 4

Views: 22939

Answers (7)

Nats
Nats

Reputation: 63

Just add bg-color prop to your v-select.

<v-select 
 name="foo"
 label="foo"
 :items="['foo', 'bar']"
 bg-color="red"
/>

Upvotes: 0

Viktor Blomstergren
Viktor Blomstergren

Reputation: 1

Use :

::v-deep to access the css.

::v-deep .v-list-item--link::before { background-color: red;  }

::v-deep .theme--light.v-list-item:hover::before { opacity: 0.64; }

Upvotes: 0

Kənan Rəcəbli
Kənan Rəcəbli

Reputation: 103

Add item-color attribute to v-select

Upvotes: 5

Yair_May
Yair_May

Reputation: 361

Maybe this can help you, it worked for me

.theme--light.v-text-field--solo > .v-input__control > .v-input__slot {
    background:#9d2449 !important;
    color: white !important;
   
}

.theme--light.v-label {
    color: rgb(252, 252, 252);
}

.theme--light.v-select .v-select__selection--comma {
    color: rgba(255, 255, 255, 0.87);
}

Upvotes: 0

Marc
Marc

Reputation: 411

I guess this is the official way to modify Vuetify: https://next.vuetifyjs.com/en/customization/theme

Upvotes: 1

Marc
Marc

Reputation: 411

Add a style for listitem on hover:

div.v-select-list div[role=list] div[role=listitem]:hover {
    background-color:#00857A;
  }

and the background of the selected option will be colored darkgreen

Upvotes: 0

Andrew Vasylchuk
Andrew Vasylchuk

Reputation: 4769

Define color:

.v-list-item--link::before { background-color: red; }

Define opacity:

.theme--light.v-list-item:hover::before { opacity: 0.64; }

Upvotes: 3

Related Questions