PrimeNG: Change the background color of selected button

Question

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.

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 ?

score 2 · Accepted Answer · answered Nov 02 '20 at 16:07

2

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 Nov 02 '20 at 16:07

Antikhippe

6,316
2
28
43

Thanks for your reply, that did not work, i updated my question for more details – M1rwen Nov 03 '20 at 09:24
I don't understand, is something not working in my StackBlitz? Have you tried to replace your CSS prefixes`.ui-` with `.p-`? – Antikhippe Nov 03 '20 at 09:52
It's working on StackBlitz but not when i integrate it with my code, that's weird .. – M1rwen Nov 03 '20 at 10:34
Can you share a picture of your DOM when you inspect your selectbutton? – Antikhippe Nov 03 '20 at 10:52
1

Yes thank you it was not the right DOM i used in my scss. Thanks a lot. – M1rwen Nov 03 '20 at 13:56
the `::ng-deep` does work, but could you explain in your original answer why? – NLxDoDge Nov 16 '21 at 12:12
It's used to override CSS. For more information: https://stackoverflow.com/questions/46786986/how-and-where-to-use-ng-deep – Antikhippe Nov 16 '21 at 12:35

score 0 · Answer 2 · answered Mar 01 '22 at 02:49

0

Hi i used to meet bug like you, it may be in your project have a different class when active. Example: In stackBlitz it will ->

    ::ng-deep .p-selectbutton .p-button.p-highlight {
    color: #007ad9 !important;
    font-weight: 700;
  }

But in my project it will ->

    ::ng-deep .ui-selectbutton .ui-button.ui-state-active {
    color: #007ad9 !important;
    font-weight: 700;
  }

It works fine for me you can try it. Thanks

answered Mar 01 '22 at 02:49

Luu Nguyen

1

This Question is a little bit old, but thanks for your effort anyway – J.Salas Mar 01 '22 at 09:04

PrimeNG: Change the background color of selected button

2 Answers2