Applying pseudo styles on checkboxes using style extensions not working as expected

Summary:

We have a requirement where we need to change the style of the checkbox as per the customer branding.

 

We are successfully able to modify some of properties of checkboxes(e.g., color, background etc.) using Styling extension.

However, when we try to change the pseudo properties(:selected, :before etc.) in checkbox css, it is not working. Please find the css here

 

Jav

ascript Extension Code

 

OraclePolicyAutomation.AddExtension({

  style: {        

    checkboxInput: {

className: "checkboxstyle", //refer below for css file

style:{

color: "blue"                        

},       

}

}

});

 

 

 

Checkboxstyle.css

 

.checkboxstyle {

background: #0d6efd;

}

 

div[role=checkbox]{

 visibility: hidden;

 position: absolute;

}

div[role=checkbox] + label:before{

 height:12px;