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

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

请注意，这实际上会覆盖默认的PrimeFaces样式，并且很可能会影响整个应用程序。如果您只需要在某个表单上进行更改，则必须定义要放置在styleClass的{{1}}属性中的自定义类，并相应地修改上面列出的样式。

所以“特殊”案例可能与此类似：

p:fieldSet

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

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

希望这会给你正确的方向。

更新 - 悬停问题

据OP报道，某些浏览器可能存在问题 - 原因是PrimeFaces将.ui-fieldset.my-custom-fieldset .ui-fieldset-toggler.ui-icon-plusthick {...} .ui-fieldset.my-custom-fieldset .ui-fieldset-toggler.ui-icon-minusthick {...}类添加到ui-state-hover节点，在某些情况下可能无法正确处理。

因此，您可以尝试仅使用简单的选择器 - 这些应始终应用：

legend

或者让选择器更加冗长，有效地指定它们两次 - 一次用于“正常”状态，一次用于“悬停”：

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

正如评论中所解释的那样，我在多个浏览器中对此进行了测试，无法重现“悬停”问题，因此您可能需要自行试验。以上列出的所有选择器示例都适用于我的环境。

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

1 个答案: