[FIXED] PrimeNG: Change the background color of selected button

Issue

I’m using PrimeNG selectButton component. https://www.primefaces.org/primeng/showcase/#/selectbutton. I can’t find a way to change the blue background color of the selected button, to a different one.

enter image description here

This is my html code

<p-selectButton [options]="brands" multiple="multiple" >
                    <ng-template let-car let-i="index" pTemplate="item">
                        <div class="brand-image-container">
                            <img id="{{car.value}}" src="./assets/images/png/brand-logos//{{car.label}}.png">
                        </div>
                    </ng-template>
                </p-selectButton>

And this is my scss:

::ng-deep {
  .ui-selectbutton .ui-button.ui-state-default {
    border-radius: 20px;
    border: solid 0 transparent;
    background-color: transparent;
    margin-right: 10px;
  }
}

::ng-deep {
   .ui-selectbutton .ui-button.ui-state-active {
        background-color: red;
    }
}
::ng-deep {
       .ui-selectbutton .ui-button.ui-state-highlight {
            background-color: green;
        }
    }

Only the default state is working.

Any help on why highlight and active states are not working ?

Solution

Try with these classes:

::ng-deep {
  .p-selectbutton .p-button.p-highlight {
    background: red;
    background-color: red;
  }

  .p-selectbutton .p-button.p-highlight:hover {
    background: green;
  }
}

See StackBlitz

Answered By – Antikhippe

Answer Checked By – Laura B. (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published