How do I style a ComboBox element with CSS?

Question

How should I style the items within a combo box when it is dropped down. I am currently using vaadin-time-picker on Svelte, but as this contains a combo box my question still remains.

I have tried many things in CSS but have got no luck. What I want to do is to make the dropdown box wider to fit the text on. To note, the dropdown box will have to be larger than the input field.

The code for my time-picker is below, any help would be greatly appreciated!

<vaadin-time-picker
      style="--vaadin-combo-box-overlay-width: 350px"
      use:action={startMaskRef}
      on:blur={valueChanged}
      placeholder="00:00"
      disabled={readonly}
      value={internalTimeRange.Start}
      on:blur={valueChanged}
      theme="custom" />
      <div class="separator">-</div>
      <vaadin-time-picker
      use:action={startMaskRef}
      on:blur={valueChanged}
      placeholder="00:00"
      disabled={readonly}
      value={internalTimeRange.Start}
      on:blur={valueChanged} />

score 2 · Answer 1 · answered Aug 26 '22 at 06:37

2

For this specific styling – changing the width of the dropdown – there's a CSS custom property on the dropdown element use can use:

html {
    --vaadin-time-picker-overlay-width: 400px;
}

answered Aug 26 '22 at 06:37

Rolf

2,178
4
18
29

score 0 · Answer 2 · answered Aug 25 '22 at 15:33

0

If you inspect the vaadin-time-picker can you see the html inside or is it loaded through scripts?

if a component/custom element contains another custom element you usually have to specify that element to be able to change the css.

Lite this:

my-custom-element another-element {
 //your styling
}

    <my-custom-element>
      <another-element></another-element>
    </my-custom-element>

answered Aug 25 '22 at 15:33

Kamirura

11
2

Yes, the dropdown for vaadin-time-picker is a combo box containing a dropdown with id "dropdown". I have tried all possible combinations in the CSS but no look. As for your suggestion, I only want to change the width of the dropdown, not the entire element. – BigJamo Aug 26 '22 at 14:42

score 0 · Answer 3 · answered Aug 25 '22 at 16:53

0

You'll want to inspect the element to view which stylable parts it exposes. You can then target them with the ::part() selector:

.my-time-picker::part(xyz) {

}

answered Aug 25 '22 at 16:53

Marcus Hellberg

1,853
10
16

Thanks, I have been using that but I cannot get anything to change on the dropdown – BigJamo Aug 26 '22 at 14:42

How do I style a ComboBox element with CSS?

3 Answers3