ComboBox: transparent

I’m trying to style the ComboBox to be white, transparent background with no clear button. I haven’t been successful at making it transparent. Below is my template:

<dom-module theme-for="vaadin-combo-box" id="white-no-clear-button">
    <template>
        <style>
            :host(.white-no-clear-button) [part="clear-button"]
{
                display:none
            }

            :host(.white-no-clear-button) [part="toggle-button"]
{
                color:white
            }
            
            :host(.white-no-clear-button) [part="text-field"]
{
                color:white
            }

            :host(.white-no-clear-button) [part="input-field"]
{
                background-color:transparent
            }
                        
        </style>
    </template>
</dom-module>

Any ideas?

Thanks.

You’ll need to use the theme attribute on the ComboBox and apply styles to vaadin-text-fields with that theme. For example:

comboBox.getElement().setAttribute("theme", "transparent");

and then

    <dom-module id="transparent-combo" theme-for="vaadin-text-field">
        <template>
            <style>
                :host([theme="transparent"]
) [part="input-field"]
{
                    background: transparent;
                }
            </style>
        </template>
    </dom-module>

Pay attention to that theme-for - you’re not styling a vaadin-combo-box, but a vaadin-text-field inside it.

-Olli

The reason why it’s done like this? Class names will not get passed down to sub components, but the theme attribute will.