Changing font size in Select

I need to set the font size of Vaadin’s built-in Select component to --lumo-font-size-s instead of --lumo-font-size-m in its “small” variant.
I added a vaadin-select.css to default/components with this CSS:

:host([theme~='small']) [part='input-field'] ::slotted(*) {
    color: yellow;
    font-size: 5px;
}

This does change the color but does not change the font size. I find the nesting of the DOM incredibly confusing. Can anyone help?

Found a solution, I added vaadin-select-item.css and then used the :host selector to reduce the font-size. The problem is that it now applies to all variants of Select because for some unknown reason theme is not inherited from “select” to “select-item”.

I had a look and the problem is that the vaadin-select-item is not part of vaadin-select but of vaadin-select-overlay and therefore the theme is not inherited

You could do that with simple CSS:

vaadin-select[theme="small"] vaadin-select-item {
    color: yellow;
    font-size: 5px;
}

But I have no solution for the select overlay

Hi! It’s an older post but maybe it will be useful to someone.
The vaadin-select-overlay inherits the theme attribute from the vaadin-select (at least in Vaadin 23.3 - image attached).
Make your own vaadin-select-overlay.css file and put this into it:

    font-size: 10px;
}```
![image.png|945x229](upload://mtMSzLVxpXnWKJO5VasaB6ZG4CX.png)

ok, some correction: the color worked (the originally posted by me), but the simple font-size change (after modification) doesn’t work (maybe the item has its own style, i dunno), but the vaadin-select-item uses the –lumo-font-size-m forn size, so you can override this CSS variable:

    color: red;
    font-size: 8px;  /* this didn't worked */
    --lumo-font-size-m: 8px;
}```