如何移除Vaadin中ComboBox及TextField组件的边框？

问题背景 #

我要做一个带ComboBox前缀的搜索输入框，让用户选择搜索的实体类型，想去掉ComboBox和TextField的边框。一开始直接给ComboBox加LumoUtility.Border.NONE没效果，后来发现边框是在内部的vaadin-combo-box-container div上，这个元素没法直接通过组件API样式化。

原无效代码：

ComboBox<InformationType> informationTypes = new ComboBox<>();
informationTypes.setItems(InformationType.values());
informationTypes.addClassName(LumoUtility.Border.NONE);

可行解决步骤 #

因为内部容器不能直接样式化，我们可以通过自定义类名+全局CSS的方式来修改：

1. 给ComboBox（和TextField）添加自定义类名

// 初始化ComboBox
ComboBox<InformationType> informationTypes = new ComboBox<>();
informationTypes.setItems(InformationType.values());
informationTypes.addClassName("borderless-combo"); // 自定义类名

// 初始化搜索TextField并关联前缀组件
TextField searchField = new TextField();
searchField.addClassName("borderless-textfield");
searchField.setPrefixComponent(informationTypes);

2. 在全局CSS文件（比如frontend/styles/shared-styles.css）中添加样式规则

/* 移除ComboBox的边框和阴影 */
.borderless-combo [part="input-field"] {
    border: none !important;
    box-shadow: none !important;
}

/* 移除TextField的边框和阴影，和ComboBox保持统一 */
.borderless-textfield [part="input-field"] {
    border: none !important;
    box-shadow: none !important;
}

补充说明 #

• 使用[part="input-field"]是Vaadin官方推荐的样式化内部组件的方式，比直接定位vaadin-combo-box-container更可靠，不会因为组件内部结构变化失效。
• 加!important是为了覆盖Lumo主题的默认样式优先级，如果你的自定义样式优先级足够高，也可以不加。
• 这样设置后，ComboBox和TextField会完全无缝衔接，符合美观需求。

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