How to style vaadin-combo-box button

Flow
1

Is this possible to style vaadin-combo-box button ? I tried to style using custom-element. But i can’t style those button.
[part="toggle-button"]

Any advice ?

2

Add this too your stylesheet, for instance, if you want to hide it.

[part=“toggle-button”]
::before { {
display:none;
}

3

Hey guys, why is this not working, and how can i achieve it?

@CssImport(value = "./styles/hide-arrow-combobox.css", themeFor = "vaadin-combo-box")
public class HideDropDownArrowComboBox<T> extends ComboBox<T> {
    public HideDropDownArrowComboBox(String label) {
        super(label);
        addClassName("hide-dropdown-arrow-combobox");
    }
}

content of hide-arrow-combobox.css

.hide-dropdown-arrow-combobox [part="toggle-button"]
 {
    display: none;
}

what i’m i doing wrong?

4

Daniel Labcube:
Hey guys, why is this not working, and how can i achieve it?

@CssImport(value = "./styles/hide-arrow-combobox.css", themeFor = "vaadin-combo-box")
public class HideDropDownArrowComboBox<T> extends ComboBox<T> {
    public HideDropDownArrowComboBox(String label) {
        super(label);
        addClassName("hide-dropdown-arrow-combobox");
    }
}

content of hide-arrow-combobox.css

.hide-dropdown-arrow-combobox [part="toggle-button"]

{

display: none;

}


what i'm i doing wrong?

Looks like your css is missing the :host selector:

:host(.hide-dropdown-arrow-combobox) [part="toggle-button"]
{
    display: none;
}