CODEWITHSUNDEEP
oracle-apexoracle-apex-23
Sri Shylesh
Sri Shylesh

Reputation: 9

Changing colour of switch button in Oracle Apex

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.

Upvotes: 0

Views: 813

Answers (2)

yeyene
yeyene

Reputation: 7380

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

Upvotes: 0

Koen Lostrie
Koen Lostrie

Reputation: 18630

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.

Upvotes: 2

Related Questions