Changing colour of switch button in Oracle Apex

Question

I have a switch button enabled in my Apex Forms page for which I have custom settings as Yes and No. I want to change the colour of the button to green on yes(selection) and red by default/unselection.

<input type="checkbox" id="P3_RESTRICTED" name="P3_RESTRICTED" value="Yes" data-on-label="Yes" data-off-value="No" data-off-label="No">

This is the html for that switch button.

Answer 1

This can be achieved by overriding the default css classes. In this case I'm using the APEX provided css variables.

In page attributes > CSS > Inline, add

.apex-button-group {
   .apex-item-option--yes input:checked+label{
    --a-button-hover-background-color: var(--ut-palette-success);
    --a-button-active-background-color: var(--ut-palette-success);
    --a-button-background-color: var(--ut-palette-success); 
   }
   .apex-item-option--no input:checked+label{
    --a-button-hover-background-color: var(--ut-palette-danger);
    --a-button-active-background-color: var(--ut-palette-danger);
    --a-button-background-color: var(--ut-palette-danger); 
   }
}

This will ensure checked is rendered as green and unchecked is rendered as red.

Answer 2

If you are using a switch item, put these CSS in CSS > Inline.

.a-Switch input[type=checkbox]:checked + .a-Switch-toggle {
    background-color: #32CD32;
}
.a-Switch-toggle {
    background-color: #F00;
}