如何增加 Primefaces Checkbox 的高度和宽度答案

【问题标题】：How to increase the height and Width of Primefaces Checkbox如何增加 Primefaces Checkbox 的高度和宽度
【发布时间】：2020-05-08 14:39:19
【问题描述】：

我正在使用 Primefaces 5.2 版。我需要增加复选框的高度和宽度，我尝试了两种可能的 css 并尝试覆盖但我找不到任何更改。由于我是造型新手，有人可以告诉我这样做的正确方法是什么

CSS 示例 1

.ui-chkbox-icon.ui-icon {
    width: 32px;
    width:32px;

.ui-chkbox-blank.ui-icon {
    width: 32px;
    width:32px;
    overflow: visible;
}
.ui-chkbox-check.ui-icon {
    width: 32px;
    width:32px;
    overflow: visible;
}

CSS 示例 2

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

.ui-chkbox .ui-chkbox-icon {
    height: 32px;
    width: 32px;
}

.ui-chkbox  .ui-chkbox-label {
    height: 32px;
    width: 32px;
}
.ui-chkbox  .ui-chkbox-blank{
    height: 32px;
    width: 32px;
}
ui-chkbox  .ui-chkbox-check {
    height: 32px;
    width: 32px;
}

使用后的结果

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

.ui-chkbox .ui-chkbox-label {
    line-height: 32px;

}

【问题讨论】：

您能否将这些复选框的 XHTML 也发布为 minimal reproducible example？
这能回答你的问题吗？ How do I override default PrimeFaces CSS with custom styles?

标签： css primefaces stylesheet

【解决方案1】：

body .ui-chkbox .ui-chkbox-box {

    width: 40px;
    height: 40px;

}

试试这个

【讨论】：

【解决方案2】：

body .ui-chkbox, body .ui-chkbox .ui-chkbox-box {
    height: 32px;
    width: 32px;
}
body .ui-chkbox .ui-chkbox-label {
    line-height: 32px;
}

试试这个

【讨论】：

您的复选框看起来不一样，是某种自定义主题吗？当我应用我的样式时，我一直在寻找这个例子primefaces boolean checkbox