Remove border from component

Issue

I want to create a search field with a combobox as prefix component so that the user can specify the entity type that he wants to search for.

To make it look nice, I want to remove the border from the combobox (and maybe from the textfield as well).

I thought that this code might do it, but unfortunately not. Result looks as shown below.

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

Edit: The combobox informationTypes does not seem to be the element that owns the border. The border belongs to the div with the class vaadin-combo-box-container. And this element can not be styled according to https://vaadin.com/docs/v23/upgrading/essential-steps. So I guess the must be another way.

Solution

Since the border that you'd like to remove is on a subcomponent within the shadow-dom of the vaadin-combo-box, you cannot edit that css via the java instance of ComboBox<InformationType> informationTypes.
However there is another way. You can read more details here

step 1: create a .css file where you declare no border for vaadin-combo-box-container. Make sure this css only applies to subcontainers of comboboxes that have the class addlater so all your other comboboxes in your view stay unaffected by this.

/* borderless-combobox-container.css */

:host(.addlater) vaadin-combo-box-container {
    border: none;
}

step 2: include this css in your view. I use @CssImport for this in Vaadin 14, however the above-linked docs mention this may have changed for vaadin 24 while still being supported. You may want to read more into that.

// this annotation can be on your routed view, or main/base view, 
// or if you have your own component class for your custom search field, you could add it there
@CssImport(value = "./styles/components/borderless-combobox-container.css", themeFor = "vaadin-combo-box")
public class MyView extends VerticalLayout {
    ...
}

Answered By - kscherrer