Combo-box styling

Flow
1

Hello.
Please i need some help about styling the combo-box textfield. I have to styling combo-box textfield, but i don’t know how to access the input-field part [part=“input-field”]
of the vaadin-text-field inside the combo-box. Does someone know how to do this? vaadin-text-field shadow root is inside the combo-box shadow root.
Thanks

2

Hi, in case if you need more flexibility, you can use vaadin-combo-box-light and create a custom element extending vaadin-text-field, the JS needed to achieve it looks like this:

class MyTextField extends customElements.get('vaadin-text-field') {
  static get is() {
    return 'my-text-field';
  }
}
customElements.define(MyTextField.is, MyTextField)

Then, you can pass it like this:

<vaadin-combo-box-light>
  <my-text-field class="input"></my-text-field>
</vaadin-combo-box-light>

And, finally, create a theme module for it:

<dom-module id="my-text-field-theme" theme-for="my-text-field">
  <template>
    <style include="lumo-text-field">
      [part="input-field"]
 {
        /* edit styles here */
      }
    </style>
  </template>
</dom-module>

Note the CSS class which is important in this case. Also, you would have to customize clear and toggle buttons. This approach ensures maximum flexibility. With the default vaadin-combo-box component, it is supposed that the users should have consistent styles for text fields, so you cannot tweak them easily.

3

Hi Sergey Kulikov, thanks for your reply. I think this could do the job for me, i’ll work on it. But is there a way to create the custom combobox in plain java? thank you

4

Sergey’s answer to a similar question might offer a solution as well: https://vaadin.com/forum/thread/17197360/17197698

5

thanks for your help.

6

Hello. Please i need some help about styling the combo-box textfield. I have to styling combo-box textfield, but i don’t know how to access the input-field part [part=“input-field”]
of the vaadin-text-field inside the combo-box. Does someone know how to do this? vaadin-text-field shadow root is inside the combo-box shadow root. Thanks

Hello everybody, I tried change to style the combo-box textfield in [part=“input-field”]
, still following in the steps of Jouni Koivuviita but this not work

7

Carlos: Here’s an additional example: https://twitter.com/alejandro_du/status/1057210556044791813

8

Jouni Koivuviita:
Carlos: Here’s an additional example: https://twitter.com/alejandro_du/status/1057210556044791813

thanks for your help.