How can I apply styles to the popup menu of the selection menu for a multi-select item?

I was able to change the font for the single select pop up menu by doing the following:

Select<String> select = new Select<String>();
select.getElement().setAttribute("theme", "grid-select");

And my CSS for the single select is:

[theme="grid-select"] vaadin-item {
    font-size: 12px;
}

[part="items"] ::slotted(vaadin-item) {
    font-size: 12px;
    min-height: 15px;
    max-height: 22px;
}

I am trying to do the same thing for the multi-select, but it does not change the font for some reason:

	MultiselectComboBox<String> select = new MultiselectComboBox<String>();
		select.getElement().setAttribute("theme", "grid-select");

css

[theme="grid-select"] vaadin-multi-select-combo-box-item {
    font-size: 12px;
}

[part="items"] ::slotted(vaadin-multi-select-combo-box-item) {
    font-size: 12px;
    min-height: 14px;
    max-height: 20px;
}

I cannot inspect the dropdown item for the multi-select because when I right-click and click on inspect, the dropdown disappear.

Can I get some guidance on this?

Assuming you are using the latest Vaadin version you can use the following global CSS:

vaadin-multi-select-combo-box-overlay.custom vaadin-multi-select-combo-box-item {
  color: green;
}

Note that this needs to be in global CSS, it looks like the code you shared is from component-specific CSS files.

Then apply the custom class name to the combo box overlay:

comboBox.setOverlayClassName("custom");
1 Like

I am using Vaadin version 14, and this solution is not working for me.

Is there a way to do it for Vaadin version 14?

Vaadin hast no Multiselect Combobox in V14.