Styling Combobox/Select

Flow
1

Hi everyone,

I could not figure out, how to get ride of the lightgray part of a combobox/select component. I manage to change the background color, but the gray-part of the component is still visible (see ButtonStyle).How do I address that part of the component either in the theme-module or with componentXY.getStyle().set(…)? The target is shown in the picture ButtonStyleToBe.

Best regards,

Patrick

17728138.png
17728141.png

2

By inspecting the elements, we can find out that inside <vaadin-combo-box>, there is a <vaadin-text-field>, and inside the shadow root of that text field the gray background is defined on a <div> element with attribute part="input-field":
![screenshot-of-chrome-dev-tools]
(https://i.gyazo.com/3535f1d8c093650814e2db7863e8c277.png)

Because the element with the background is in the shadow DOM of <vaadin-text-field>, we can override the styles by creating a theme-module for <vaadin-text-field>:

<dom-module id="text-field-theme" theme-for="vaadin-text-field">
  <template>
    <style>
      [part~="input-field"]
 {
        background: #8bc1c0;
      }
    </style>
  </template>
</dom-module>

However, this changes the styles for all text fields, not only those inside <vaadin-combo-box>. We can’t solve this by creating a theme-module for combo box, because those styles would be injected into the shadow DOM of combo box, and they don’t go through the next shadow root of the text field.

If we want to target only the text fields inside a combo box, we need to somehow recognize from the text field element that it is inside a combo box. Combo box at least seems to set part="text-field" for the text field, so we can use that:

:host([part~="text-field"]
) [part~="input-field"]
 {
  background: #8bc1c0;
}

This wouldn’t target normal text fields, but it will also target fields inside e.g. <vaadin-date-picker>, which uses the same naming convention for parts.

Right now I don’t have a solution for targeting only the text fields inside combo box.

3

Maybe the theme attribute approach can help with text fields inside specific components: https://vaadin.com/forum/thread/17596415/styling-a-web-component-part-inside-another-web-component

4

Thanks to both of you. Works perfectly.

5

Great, thanks Olli!

One thing to note about the theme propagation. <vaadin-combo-box> has specific implementation for propagating the theme attribute to the <vaadin-text-field> inside it. Similar functionality exists for some other components as well, but it doesn’t work for all cases. So the same solution doesn’t work for any Vaadin component inside any other Vaadin component.