Flow - Select Box Toggle Button Theming

Flow
1

Hello, i want to change the position of the toggle button of the select box. The approach described in the following is sadly not working:

Current:

Goal (achieved with Debug):

My Approach:

<dom-module id="select-textfield-customs-theme" theme-for="vaadin-select-text-field">
    <template>
        <style>
            [part="toggle-button"]
 {
                width: 13px;
                height: 30px;
            }
        </style>
    </template>
</dom-module>

Sadly nothing is changing.
How can i achieve my goal with styling?

2

Have you tried with !important just like you did in the developer tools of your browser?

3

Kaspar Scherrer:
Have you tried with !important just like you did in the developer tools of your browser?

I tried that also, but the code is note even showing in the debugging tools. Other styling of the component like the following is working fine:

<dom-module id="select-textfield-customs-theme" theme-for="vaadin-select-text-field">
    <template>
        <style>
		    /* Working fine */
            :host([theme~="tile-select"]
) {
                height: var(--tile-header);
                width: 80px !important;
                margin: 0px;
                padding: 5px;
                box-sizing: border-box;
            }
			/* Not working */
           [part="toggle-button"]
 {
                width: 12px !important;
                height: 29px !important;
            }
        </style>
    </template>
</dom-module>
4

Hi Jonas,

Try the following:

<dom-module id="lumo-select" theme-for="vaadin-select">
  <template>
    <style include="lumo-field-button">
      [part="toggle-button"]
 {
		// Styles here.
      }
    </style>
  </template>
</dom-module>
5

Thank you very much. That worked!