Hello,

we're trying to create a checkbox to look like the expand/collapse button and have a section appear/hide based on the checkbox state....so we made a special format for checkboxes called 'Expand Collapse' and placed it in the Skin in order to apply more styling on it via CSS.

We already have a special customization in place for all checkboxes in the application (code below)... we want to create a similar customization but with different backgrounds for the 'expand_collapse" class... (similar to how it look like for Quick Land row in the screenshot attached)

/* Checkbox overrides *****************************/
input[type="checkbox"]:checked, 
[data-ctl="Checkbox"] input[type="checkbox"]:checked, 
.flex.content > .flex.content-item > .checkbox input.checkbox:checked, 
.flex.content > .flex.content-item input.checkbox:checked, 
.content-item > .content-inner>.field-item > .checkbox input.checkbox:checked {
    background: url('webwb/checkboxselected.svg') no-repeat 50% 50% #1700F4 !important;
    background-size: 28px !important;
}

input[type="checkbox"], 
[data-ctl="Checkbox"] input[type="checkbox"], 
.flex.content > .flex.content-item > .checkbox input.checkbox, 
.flex.content > .flex.content-item input.checkbox, 
.content-item > .content-inner > .field-item > .checkbox input.checkbox {
    background-color: transparent !important;
}

input[type="checkbox"], 
[data-ctl="Checkbox"] input[type="checkbox"], 
.flex.content > .flex.content-item input.checkbox, 
.flex.content > .flex.content-item > .checkbox input.checkbox, 
.content-item > .content-inner > .field-item > .checkbox input.checkbox div[data-ctl='RadioGroup'] input[type='radio'], 
.flex.content > .flex.content-item .radioTable input, 
.flex.content > .flex.content-item #CT > .radioTable input, .gridTable input[type="radio"] {
    border: 1px solid #C4C4C4 !important;
}

input[type="checkbox"], 
[data-ctl="Checkbox"] input[type="checkbox"], 
.flex.content > .flex.content-item input.checkbox, 
.flex.content > .flex.content-item > .checkbox input.checkbox, 
.content-item > .content-inner > .field-item > .checkbox input.checkbox div[data-ctl='RadioGroup'] input[type='radio'], 
.flex.content > .flex.content-item .radioTable input, 
.flex.content > .flex.content-item #CT > .radioTable input, 
.gridTable input[type="radio"] {
    width: 28px !important;
    height: 28px !important;

**Update Solution [6/17]:**

I was able to create the following helper class (checkbox-expand) and apply it in the Advanced Presentation Options for the checkbox and it worked!  

/****************************************
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);
}