如何为唯一的复选框设置样式，使其看起来像展开/折叠(Pega 8.6)

Question

我们正在尝试创建一个复选框，使其看起来像展开/折叠按钮，并有一个基于复选框state....so的部分出现/隐藏，我们为复选框“展开崩溃”创建了一种特殊的格式，并将其放置在皮肤中，以便通过CSS应用更多的样式。

我们已经对应用程序中的所有复选框进行了特殊的定制(下面的代码).我们想要为“expand_collapse”类创建一个类似的定制，但是背景不同.(下面的截图)

​

​

希望在css中提供一些帮助(我编写的任何代码都会一直应用于所有复选框，而不是特定的.)

更新解决方案6/17

由于这里的答复，我能够创建以下助手类(复选框-展开)，并将其应用于复选框的高级演示选项中

/****************************************
Type: helper-class
Name: checkbox-expand
Category: cell
Description: Applies styles to the checkbox control to display it as a expand
*********************************************************/
.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/* adjust as preferred - is not inherited */
}

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

Answer 1

转到Presentation控件的Checkbox选项卡。

去Advanced Presentation Option

在Cell read-write classes和Cell read-only classes中，给出一个css类名。例如，regular-checkbox。

现在转到CSS文件，在那里您已经定制了复选框。

将input[type="checkbox"]替换为.regular-checkbox input[type="checkbox"]，并刷新显示该复选框的浏览器屏幕以查看结果。

现在，您可以在特定的复选框中使用这个CSS类。