如何自定义 p:fieldset 的展开和折叠图标

Question

如何将 PrimeFaces 5.2 <p:fieldset> 的展开和折叠图标更改为我自己的图标？

Answer 1

定义以下样式对我有用：

.ui-fieldset .ui-fieldset-toggler.ui-icon-plusthick {
    background-image: url("#{resource['img/plus.png']}");
    background-position: left top;
}

.ui-fieldset .ui-fieldset-toggler.ui-icon-minusthick {
    background-image: url("#{resource['img/minus.png']}");
    background-position: left top;
}

此示例假设您的 resources/img 文件夹中有名为 plus.png 和 minus.png 的图像。

请注意，这实际上会覆盖默认的 PrimeFaces 样式，并且很可能会影响整个应用程序。如果您只需要在某种形式上更改它，则必须定义一个自定义 class 以放置在 p:fieldSet 的 styleClass 属性中，并相应地修改上面列出的样式。

所以 "special" 案例看起来类似于：

<p:fieldset styleClass="my-custom-fieldset" ...

并且相关样式将重新定义如下：

.ui-fieldset.my-custom-fieldset .ui-fieldset-toggler.ui-icon-plusthick {...}
.ui-fieldset.my-custom-fieldset .ui-fieldset-toggler.ui-icon-minusthick {...}

希望这会为您指明正确的方向。

更新 - 悬停问题

据 OP 报告，某些浏览器可能存在问题 - 原因是 PrimeFaces 将 class ui-state-hover 添加到 legend 节点，这可能无法正确处理一些情况。

所以您可以尝试只使用简单的选择器 - 这些应该始终应用：

.ui-fieldset-toggler.ui-icon-plusthick {...}
.ui-fieldset-toggler.ui-icon-minusthick {...}

或者为了使选择器更加冗长，有效地指定它们两次 - 一次用于 "normal" 状态，一次用于 "hover":

.ui-fieldset-legend .ui-fieldset-toggler.ui-icon-plusthick { /* plus */ }
.ui-fieldset-legend.ui-state-hover .ui-fieldset-toggler.ui-icon-plusthick { /* plus */}
.ui-fieldset-legend .ui-fieldset-toggler.ui-icon-minusthick { /* minus */ }
.ui-fieldset-legend.ui-state-hover .ui-fieldset-toggler.ui-icon-minusthick { /* minus */}

如评论中所述，我在多个浏览器中对此进行了测试，无法重现 "hover" 问题，因此您可能需要自行试验。上面列出的所有选择器示例都在我的环境中工作。

如何自定义 p:fieldset 的展开和折叠图标

How to customize expand and collapse icons of p:fieldset

css

jsf

icons

fieldset

primefaces