Native/List select - styling options.


I’ve encountered a problem with options of native and list select component.

I am trying to style their options.

The problem occurs when I try to reference to option in .css.
Since it has no class, I cannot reference it:

End result should be picture on right:

I would know how to style it with .css but I cannot seem get reference to selected option.

I’ve managed to style my table font-color and background color using .css, but would like that my application stays consistent therefore I need to be able to change colors of my select components.

Thank you!


have you tried the following:

.myListComponent select option {
    // Insert your CSS rules here

Please note that all browsers do not necessarily let you change the styles on native components, or at the very least the applicable changes can be very limited.


Nevermind. Just realized you want to style the selection. That’s not possibly with CSS directly and it’s not supported in the Vaadin components. The bg color comes from the browser.

If you’re willing to write an extension, this could most likely be achieved with some client-side code.


Thank you for reply Teppo Kurki!

I realized it is impossible to change background color of selected item.
Therefore I replaced my component with Vaadin Table component.

This is the end-result: