如何将 primefaces 复选框（selectBooleanCheckbox）的样式更改为普通的 JSF 2 复选框？

Question

需要更改 primefaces 复选框的 CSS 样式。负责更改复选框样式的样式有哪些class？

.ui-chkbox{
display:inline !important;
}
.ui-chkbox .ui-chkbox-box
{
width:10px !important;
height:10px !important;
-moz-border-radius:2px !important;
-webkit-border-radius:2px !important;
border-radius:2px !important;
}

.ui-chkbox-icon.ui-icon-check
{
background-position:center;
}

.ui-chkbox .ui-chkbox-label{
cursor:pointer !important;
margin:1px 0 0 1px !important;
outline:medium none !important;
z-index:1 !important;
display:inline-block !important;
vertical-align:top !important;
}

Answer 1

由于您使用的是 PrimeFaces 5.2，因此您可以查看当前 PrimeFaces User Guide 和第 411 页中的所有皮肤 CSS 类，特别是，它为您提供了有关 p:selectBooleanCheckbox

.ui-chkbox Main container element.
.ui-chkbox-box Container of checkbox icon.
.ui-chkbox-icon Checkbox icon.
.ui-chkbox-label Checkbox label.

Answer 2

我设法使用这些 CSS 代码解决了同样的问题：

.indivcheckbox .ui-chkbox-icon {
    background-position-x: -66px;
    background-position-y: -147px;
}

.indivcheckbox .ui-icon-check {
    width: 12px;
    height: 12px;
}

虽然我的组件是这样的：

<p:selectBooleanCheckbox styleClass="indivcheckbox" />

基本上，您只需将方框变小，然后通过修改背景位置-(x/y) 来调整复选图标，使其居中。

希望对您有所帮助。

如何将 primefaces 复选框（selectBooleanCheckbox）的样式更改为普通的 JSF 2 复选框？

How to change the style of primefaces checkbox(selectBooleanCheckbox) to normal JSF 2 checkbox?

primefaces