如何用CSS设置ComboBox样式？Vaadin TimePicker下拉框加宽求助

针对你在Svelte中使用vaadin-time-picker时，下拉框宽度无法超过输入框的问题，提供以下两种可行方案：

方案一：设置固定宽度 #

在Svelte组件的样式块中添加全局样式（通过:global()突破Scoped样式的Shadow DOM隔离）：

<style>
/* 仅作用于带custom主题的时间选择器 */
:global(vaadin-time-picker[theme="custom"] vaadin-combo-box-overlay) {
  width: 350px !important;
}

/* 作用于所有时间选择器 */
:global(vaadin-time-picker vaadin-combo-box-overlay) {
  width: 350px !important;
}
</style>

方案二：自动适配文本内容 #

如果希望下拉框根据选项文本长度自动调整宽度，替换为fit-content：

<style>
:global(vaadin-time-picker vaadin-combo-box-overlay) {
  width: fit-content !important;
  min-width: 200px; /* 可选：设置最小宽度避免过窄 */
  white-space: nowrap; /* 防止文本换行 */
}
</style>

关键说明 #

你之前直接在组件上设置--vaadin-combo-box-overlay-width未生效，是因为Vaadin组件的Shadow DOM隔离机制，外部样式/变量无法直接穿透到内部的vaadin-combo-box-overlay元素。通过:global()声明全局样式，才能覆盖内部组件的默认样式。

清理冗余事件后的组件代码（你原代码中重复了on:blur）：

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

内容的提问来源于stack exchange，提问作者BigJamo