How to Change the Vaadin-Select Hover colour

Question

Current Hover Color

I want to change the hover color when we move mouse over the items in the vaadin-select box, by default its coming in light blue color as seen in screenshot 1 but I want to change to some other color. How to do that ?

I have tried by adding

:host(:hover) {
    background-color: #9cbdd6;
}

and importing as

@CssImport(value = "./styles/vaadin-select-items.css", themeFor = "vaadin-item")

Inspecting Vaadin Select

The below answer worked perfectly for the above problem,
However There is one problem happening the hover color is coming when the dropdown is closed also means the overlay is not opened. How to stop that ?

I need only to modify the hover color on the overlay as below which is happening correctly via the mentioned code but need to stop the above.

Hover color on the overlay items

Also applying theme like this is applied on all overlay items, how to apply these styles uniquely for some components.

Answer 1

You're on the right track, but you'll need a strong selector. If you're willing to use !important, this will work:

:host(:hover:not([disabled]))  {
    background: red !important;
}