如何更改primeNG复选框的大小

Question

一个简单的问题...我如何调整p-checkbox的大小？ 没有primng我做了类似的事情 <p-checkbox style="transform: scale(2.0)"></p-checkbox>

但是随着我的加入

Error: Cannot find a differ supporting object 'transform: scale(2.0)'
    at ...

那么如何使复选框更大？

Answer 1

您可以通过简单地覆盖其css来做到这一点。首先，更改复选框的大小：

body .ui-chkbox .ui-chkbox-box {
  width: 25px;
  height: 25px;
}

然后您可以修改选中标记的大小：

body .ui-chkbox .ui-chkbox-box .ui-chkbox-icon {
  font-size: 20px;
}

如果需要，您可能还需要更改标签的offset：

body .ui-chkbox-label {
  margin: 0 0 0 0.8em;
}

Answer 2

您可以在 CSS 中指定 width 和 height，例如：

.p-checkbox .p-checkbox-box {
  width: 14px;
  height: 14px;
}
.p-checkbox .p-checkbox-box .p-checkbox-icon {
  font-size: 8px;
}