ComboBox Color

Flow
1

If possible combobox set background color in css

2

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

3

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

4

:-1: not work

5

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

6

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

7

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

8

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

9

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.

10

Basically following: https://vaadin.com/docs/latest/styling/getting-started

11

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

12

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

13

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

    background-color: green;
  hight:10px;

}

14

Please read the styling documentation.

15

I wrote an explainer about the 2 different ways to apply styles to components in this thread yesterday: https://discord.com/channels/732335336448852018/1024801893739929610/1024976469526581248

16

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
}```
17

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.
18

It’s fully accect
comob_color.png

19

Here’s what I do:

colored-field.css:

: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));
            });
            return;
        }
        if (set) {
            if (!component.hasClassName(className))
                component.addClassName(className);
        } else {
            component.removeClassNames(className);
        }
    }

    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) {
        component.setClassName(null);
    }
    public static boolean isFieldNormal(HasStyle component) {
        return component.getClassNames().size() == 0;
    }
}

Now call FieldBackgroundChanger.setFieldSuggested(field, true);

20

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

html {
  --suggested-color: #f8f5af;
}

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