How to style a select element's popup

Question

I'm trying to style the Select element's popup window (the window that opens when you go to select an item).

I can correctly target the popup via the following CSS:

vaadin-select-item { 
    background: black;
    color: white;
}

The problem is that this sets the popup globally where as I only want this styling to apply to this specific element.

I've set the following class names:

var droplist = new Select<SearchType>();
        droplist.addClassName("search-bar");
        droplist.setOverlayClassName("search-bar_popup");

I can target the main drop list with:

vaadin-select.search-bar::part(toggle-button) {
    color: white;
}

The Vaadin documentation on styles is rather limited.

But when I try to target the popup the CSS fails to target the element:

vaadin-select-item.search-bar_popup { 
    background: black;
    color: white;
}

Answer 1

The overlay-classname is applied to the overlay-element, not to individual items in the overlay. The items are regular child elements of the overlay, so with an overlay-classname of search-bar you would target them like so:

/* style the overall select element */
.search-bar vaadin-select  {
    height: 58px;
    width: 120px;
    align-content: center;
    flex-wrap: wrap;
}


/* search type drop list */
.search-bar vaadin-select-item  { 
    background: black;
    color: white;
}

/* style the drop arrow */
.search-bar vaadin-select::part(toggle-button) {
    color: white;
}

/* style the popup window */
.search-bar_popup vaadin-select-item {
    background: black;
    color: white;
}