Search code examples
cssangularprimeng

PrimeNG: CSS background for p-inputNumber

I am using PrimeNG and find a way to set the background-color of a p-inputNumber control.

It is working fine with pInputText.

<!-- OK -->
<input pInputText type="text" style="background: red;"/>

<!-- Not OK -->
<p-inputNumber [showButtons]="true" style="background: red;"></p-inputNumber>
Solution

  • p-inputNumber is a component rather than a simple input element and it style in different way base of the documentation page you can add a class for the internal input element by using the property inputStyleClass

    add the css class in global style file

    style.css

    input.bg-red{
 background:red;
 color:#fff;
}

    template

     <p-inputNumber inputStyleClass="bg-red" [(ngModel)]="value1"></p-inputNumber>

    StackBlitz demo