Change p-inputSwitch label and style

Issue

I would change the style of p-inputSwitch component of Primeng library

I would get something like this:

Here's my code :

<div class="contner">
    <div class="toggle-area">
        <p>SEARCH BY</p>
        <div >
        <p class ="toggle-inline">Business group</p>
        <div class="toggle-btn toggle-inline">
            <p-inputSwitch [(ngModel)]="checked"
            onLabel=""
            offLabel=""
            styleClass="ui-inputswitch"
            ></p-inputSwitch>
        </div>
        <p class="toggle-inline">Borrower</p>
        </div>
</div>

I started by deleting labels but width changes also and I don't know how to increase it

Solution

I started by deleting labels but width changes also and I don't know how to increase it

Override PrimeNG ui-inputswitch class :

.ui-inputswitch {
  width: 80px !important;
}

See Plunker

Answered By - Antikhippe