更改 p-inputSwitch 标签和样式答案

【问题标题】：Change p-inputSwitch label and style更改 p-inputSwitch 标签和样式
【发布时间】：2026-01-06 06:45:01
【问题描述】：

我会改变Primeng库的p-inputSwitch组件的样式

我会得到这样的东西：

这是我的代码：

<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>

我从删除标签开始，但宽度也发生了变化，我不知道如何增加它

【问题讨论】：

标签： html css angular primeng

【解决方案1】：

我从删除标签开始，但宽度也发生了变化，我不知道如何增加它

覆盖 PrimeNG ui-inputswitch 类：

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

见Plunker

【讨论】：

【解决方案2】：

你可以用下面的替换你的 div 元素

<p-toggleButton onLabel="Business Group(s)" offLabel="Borrower(s)"
    onIcon="fa-toggle-on" offIcon="fa-toggle-off" [(ngModel)]="checked"></p-toggleButton>

【讨论】：