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

background-color vuetify.js selected v-select
Marc picture Marc · Aug 5, 2019 · Viewed 13.3k times · Source

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>

Answer

Andrew Vasilchuk picture Andrew Vasilchuk · Aug 5, 2019

Define color:

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

Define opacity:

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

Related questions

How to make div background color transparent in CSS

I'm not using CSS3. So I can't use opacity or filter attributes. Without using these attributes how can I make the background-color transparent of a div? It should be kind of the text box example in this link. Here the …

Read More
Why does HTML think “chucknorris” is a color?

How come certain random strings produce colors when entered as background colors in HTML? For example: ...produces a document with a red background across all browsers and platforms. Interestingly, while chucknorri produces a red background as well, chucknorr produces a …

Read More
Change select box option background color

I have a select box and I'm trying to change the background color of the options when the select box has been clicked and shows all the options. See Fiddle HTML: <select> <option val="">Please choose&…

Read More