Pega 8.6 如何将特定复选框设置为展开/折叠按钮样式

需求背景 #

• 目标效果：将复选框渲染为展开/折叠按钮，根据复选框的选中状态控制对应内容区块的显示/隐藏。前期已在Skin规则中创建名为「Expand Collapse」的复选框专用格式，用于挂载自定义CSS样式。
• 现有配置：当前应用已配置作用于所有复选框的全局自定义样式，需要为挂有expand_collapse类的特定复选框编写独立样式规则，设置差异化的背景样式，元素检查参考截图：
  
• 初期问题：编写的CSS样式始终会全局生效，覆盖所有复选框，无法仅作用于目标特定复选框。

最终解决方案（6月17日更新） #

通过创建独立辅助类限定样式作用域，再将该类配置到目标复选框的高级展示选项中，即可实现样式的精准挂载，不会污染全局其他复选框的默认样式。
创建分类为cell、名为checkbox-expand的辅助类，完整CSS代码如下：

/****************************************
Type: helper-class
Name: checkbox-expand
Category: cell
Description: 将复选框控件渲染为展开/折叠按钮样式
*********************************************************/
.checkbox-expand,
.checkbox-expand > .checkbox {
  position: relative;
}

.checkbox-expand input.checkbox[type="checkbox"],
.flex.content > .flex.content-item .checkbox-expand input.checkbox[type="checkbox"] {
    min-width: 0!important;
    margin: 0!important;
    font-size: 0;
    width: 0!important;
    height: 0!important;
    border: 0!important;
}

.checkbox-expand input.checkbox[type="checkbox"],
.checkbox-expand input.checkbox[type="checkbox"]::before,
.checkbox-expand input.checkbox[type="checkbox"]::after {
    margin: 0;
    cursor: pointer;
    vertical-align: middle;
    line-height: 30px;
}

.checkbox-expand .checkbox[disabled],
.checkbox-expand .checkbox[disabled]::before,
.checkbox-expand .checkbox[disabled]::after {
    pointer-events: none;
}

.checkbox-expand input.checkbox[type="checkbox"] {
    position: relative;
    padding-left: 54px;
    display: inline-block;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    min-height: 42px;
    font-size: 18px; /* 可根据需求自行调整，该属性不会继承父级样式 */
}

.checkbox-expand input.checkbox[type="checkbox"]::before,
.checkbox-expand input.checkbox[type="checkbox"]::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .15s;
}

.checkbox-expand input.checkbox[type="checkbox"]::after {
    border-radius: 15px;
    width: 24px;
    height: 24px;
    margin: 2.5px;   
    background: url('webwb/ArrowDown.svg') no-repeat 50% 50% !important;
}

.checkbox-expand input.checkbox[type="checkbox"]:checked::before {
    background-color:transparent;
    background-image: none;
    border-color: transparent;
    color: transparent;
    height: 30px;
    width: 50px;
    margin: 0;  
}

.checkbox-expand input.checkbox[type="checkbox"]:checked::after {
  -moz-transform:scaleX(-1) scaleY(-1);
  -o-transform:scaleX(-1) scaleY(-1);
  -webkit-transform:scaleX(-1) scaleY(-1);
  transform:scaleX(-1) scaleY(-1);
}

样式逻辑说明：默认状态下复选框渲染为向下箭头，选中状态下箭头翻转180度变为向上，搭配对应区块的显隐控制逻辑，即可实现完整的展开/折叠交互效果。

内容的提问来源于stack exchange，提问作者Reda