Question 200958 in CSS Question posted in
Some basic documentation can be found here.

Css – How to change the color of toggle button in multi-select-combo-box Vaadin component?

So I’m using the Vaddin multi select combo box in filter.ts like so:

        <vaadin-multi-select-combo-box
          required
          placeholder="Select countries to visit"
          item-label-path="name"
          item-id-path="code"
          .items="${this.items}"
        >
          <div slot="error-message">Please select at least one country</div>
        </vaadin-multi-select-combo-box>

And I’m trying to change the toggle button color like this in the same file:

  static styles = css`

     :host::part(toggle-button)::before {
       color: yellow;
     }

  `;

Which is the right selector as you can see in the screenshot:

enter image description here

But the color of the toggle button is not changing:

enter image description here

It’s the same grey as it was before.

what is the correct way of changing the toggle button color?

Tags:

2

Answers


  1. 0

    try this:

    .toggle-button[part$='button']{
    color: yellow !important;
}
    Login or Signup to reply.
  2. 0

    The selector you are using targets :host, which means the host element of the shadow root that contains the styles, which means the styles would have to be within the shadow DOM of the combo box itself for that to work.

    Instead you should target the component’s tag name and the respective part name:

    vaadin-multi-select-combo-box::part(toggle-button) {
  ...
}

    Edit: See also the component’s styling documentation which lists all available selectors: https://vaadin.com/docs/latest/components/multi-select-combo-box/styling

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search