ComboBox Color

If possible combobox set background color in css

vaadin-combo-box::part(input-field) { background-color: green;}

Here is how I found the right part from the shadow DOM using Chrome inspector :sunglasses:

:-1: not work

i use @CssImport(value = “./styles/vaadin-combo-box-styles.css”, themeFor = “vaadin-combo-box”)

vaadin-combo-box-styles.css [part=“input-field”] {
background-color: green; height:10px;

Which version of Vaadin? The above works fine for me in 23.2.2

Components changed internally quite a lot from v14 → v23, which affects CSS.

Both seem to work in Vaadin 23.2. In my original suggestion the rule was in themes/myapp/styles.css and Application class had “@Theme(“myapp”)” annotation.

Basically following:

My Vaadin Version: vaadin 14.8.15 i use @CssImport(value = “./styles/vaadin-combo-box-styles.css”, themeFor = “vaadin-combo-box”)
vaadin-combo-box-styles.css [part=“input-field”] {
background-color: green; height:10px;
} the combo box height is too big and the color not change that’s i want css

Anything with ::part() should NOT be loaded with themeFor. Just put the CSS Matti showed you in your styles.css

.ComboBox::[part=“input-field”] {

    background-color: green;


Please read the styling documentation.

I wrote an explainer about the 2 different ways to apply styles to components in this thread yesterday:

so if you have a theme with a themes/some-theme-name/components folder, you put your component stylesheets there, named according to the html tag name of the component (e.g. vaadin-combo-box.css) and you apply the theme for the whole app using @Theme("some-theme-name")

if you don’t have that folder, you’re using the OLD way. In that case you load the styles with @CssImport(value="some-stylesheet-name.css", themeFor="vaadin-combo-box")

in both cases, you target parts simply with the [part="part-name"] selector, so for input-field that’s

    // your styles here

Then there’s the third way, which Matti showed in the beginning of this thread, which is to ignore both of those methods, and simply put your styles in a non-component-specific stylesheet – that’s a sheet that’s applied to your whole application that you can load with @CssImport("./styles/styles.css") if that’s what your stylesheet is called, and use the component’s html tag name together with the ::part() selector to target the component and its part, so

  // your styles here

So, 3 different ways to do the same thing. Choose one and don't confuse them with each other.

It’s fully accect

Here’s what I do:


:host(.suggested:not([invalid])) [part~="input-field"] {
  background-color: var(--suggested-color) !important;

Have a helper class with this content:

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.HasStyle;
import com.vaadin.flow.component.dependency.CssImport;

@CssImport(value = "./styles/colored-field.css", themeFor="vaadin-text-field")
@CssImport(value = "./styles/colored-field.css", themeFor="vaadin-date-picker")
@CssImport(value = "./styles/colored-field.css", themeFor="vaadin-password-field")
@CssImport(value = "./styles/colored-field.css", themeFor="vaadin-integer-field")
@CssImport(value = "./styles/colored-field.css", themeFor="vaadin-number-field")
@CssImport(value = "./styles/colored-field.css", themeFor="vaadin-combo-box")
public class FieldBackgroundChanger {
    private static void setFieldClassName(HasStyle component, String className, boolean set) {
        if (!((Component)component).isAttached()) {
            ((Component)component).addAttachListener(event -> {
                event.getUI().access(() -> setFieldClassName(component, className, set));
        if (set) {
            if (!component.hasClassName(className))
        } else {

    public static void setFieldSuggested(HasStyle component, boolean value) {
        setFieldClassName(component, "suggested", value);

    public static boolean isFieldSuggested(HasStyle component) {
        return component.hasClassName("suggested");
    public static void setFieldNormal(HasStyle component) {
    public static boolean isFieldNormal(HasStyle component) {
        return component.getClassNames().size() == 0;

Now call FieldBackgroundChanger.setFieldSuggested(field, true);

the actual background color values are defined somewhere else like so:

html {
  --suggested-color: #f8f5af;

[theme~="dark"] {
  --suggested-color: #5d5b41;