How do I style a ComboBox element with CSS?-CodePudding

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!

      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 >-</div>
      <vaadin-time-picker
      use:action={startMaskRef}
      on:blur={valueChanged}
      placeholder="00:00"
      disabled={readonly}
      value={internalTimeRange.Start}
      on:blur={valueChanged} />

CodePudding user response：

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>

CodePudding user response：

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) {

}