I'm trying to customize the color of the tick on a UI5 checkbox.
After inspecting the CSS, I noticed that it can be modified using the ::before selector:
To target the checkbox, I added a class called .accept and defined it in the CSS file like this:
.accept.sapMCbBg.sapMCbMarkChecked::before{
content: "\e05b";
font-family: "SAP-icons";
color: #00a600;
}However, the customization is not taking effect. Any suggestions on how to make it work? Thank you.
EDIT: Below is the code snippet for the checkbox:
var oCheckBox = new sap.m.CheckBox({
text: "test",
selected: false,
select: function(oEvent){
if (oEvent.getSource().getSelected() == true){
oEvent.getSource().addStyleClass("accept");
}else{
oEvent.getSource().removeStyleClass("accept");
}
}
});