Question

需要更改primefaces复选框的CSS样式。什么是负责更改复选框样式的样式类？

＆＃13;

.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;
}

＆＃13;

Answer 1

当您使用PrimeFaces 5.2时，您可以检查当前PrimeFaces User Guide和第411页中的所有蒙皮CSS类，特别是，它会为您提供有关p:selectBooleanCheckbox的详细信息

.ui-chkbox 主要容器元素    .ui-chkbox-box 复选框图标容器    .ui-chkbox-icon 复选框图标。
   .ui-chkbox-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复选框？

2 个答案: