Vaadin 24 : Styling specific MultiSelectComboBox items in multiple pages

Flow
1

I have a lot of MultiSelectComboBox components in my Vaadin app, most of them are inside a grid table.

I was able to style the dropdown items using this CSS:

vaadin-multi-select-combo-box-item {
    font-size: 12px;
    min-height: 14px; 
}

However, this style is also being applied to a MultiSelectComboBox on a different page where I don’t want it.

I tried giving the combo box an id in Java:

private MultiSelectComboBox<String> customerSelect = new MultiSelectComboBox<>();
customerSelect.setId("customerSelectComboBox");

and then writing CSS like this:

vaadin-multi-select-combo-box#customerSelectComboBox > vaadin-multi-select-combo-box-item {
    font-size: 16px;
}

but the style does not get applied.

How can I style just this specific MultiSelectComboBox (its items) without affecting the others?

Thanks in advance!

2

You almost got it.

First, I’d recommend using a class name instead of an id. If you really only have just one combo box where you need these styles, then an id is also fine. But if you add the same id on many combo boxes at the same time, that’s not good, as ids should be unique on any given web page.

The main problem is your CSS selector, where you use the direct child selector >. The vaadin-combo-box-item elements are not the immediate children of the vaadin-combo-box element, as you can see in the DOM inspector – the vaadin-combo-box-scroller element is in between them:

Screenshot 2026-01-08 at 7.16.42
Screenshot 2026-01-08 at 7.16.42766×636 108 KB

This should work (you also don’t need the vaadin-combo-box tag name selector with the id):

#customerSelectComboBox vaadin-multi-select-combo-box-item {
    font-size: 16px;
}
1 Like
3

I tried using this CSS selector, and it still does not work

#sitesSelectComboBox vaadin-multi-select-combo-box-item {
    font-size: 16px;
}

Before I click on the multi-select, it shows vaadin-multi-select-combox-box with id=“sitesSelectCombox”
image

When I click on it, and the list of dropdown is showing, the elements looks like this:

image
image907×526 59.2 KB

We can see it is still applying the style from vaadin-multi-select-combo-box-item

Here is my css file:

vaadin-multi-select-combo-box-item{
    font-size: 12px;
    min-height: 14px; 
    max-height: 20px;	
}

#sitesSelectComboBox vaadin-multi-select-combo-box-item{
    font-size: 16px;
}
4

I’m having a bit of trouble getting this to work, so I’m considering an alternative approach.

Instead, I’m adding a theme to the grid’s select. I did this by setting the theme attribute directly:

select.getElement().setAttribute("theme", "grid-styled-select");

I read this : How to use an application theme in Vaadin
Then I did this:

@Theme(value = "myapp")
public class AppShellConfig implements AppShellConfigurator {
   ...
}

However, I’m still a bit confused about how to apply CSS to only the select that has this theme.
For example, I currently have this style:

vaadin-multi-select-combo-box-item {
    font-size: 12px;
    min-height: 14px;
    max-height: 20px;
}

I want this style to apply only to the multi-select combo that has the grid-styled-select theme, and not to all multi-select combo boxes.

5

What should work is setting an overlay class name on the combo box:

mscb.setOverlayClassName("site-select-overlay");

Then target items with this selector:

.site-select-overlay vaadin-multi-select-combo-box-item { ... }

This behavior is specific to Vaadin 24 and earlier. In Vaadin 25 you could just use mscb.setClassName.

6

this works, thanks!

I’m still interested in understanding how to apply styles to a specific component that I’ve added a theme name to.

For example,

select.getElement().setAttribute("theme", "grid-styled-select");
7

For a theme name the selector would be:

[theme~='grid-styled-select'] vaadin-multi-select-combo-box-item

Though we recommend using class names. The setOverlayClassName API was explicitly added to support styling overlays using more common CSS constructs like class selectors, instead of the attribute selector you need to use for the theme.

1 Like