css - 更改复选框勾选颜色和图标 - sapui5

Question

我需要更改 UI5 复选框上勾号的颜色。我查看了 CSS，发现这是在 ::before 选择器中:

我在复选框中添加了一个名为 .accept 的类，并在 CSS 文件中这样定义:

.accept.sapMCbBg.sapMCbMarkChecked::before{
    content: "\e05b";
    font-family: "SAP-icons";
    color: #00a600;
}

这是行不通的。你有什么建议吗？谢谢。

编辑:这是复选框的代码:

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

Answer 1

将新的 CSS 类添加到 CheckBox DOM 渲染后。您可以使用 getDomRef 获取相应的 DOM 元素，这会为您提供 UI5 元素所在的 HTML DOM调用。

.green::before{
    color: #00a600 !important;
}

然后，使用 jQuery 进入 CheckBox 的 tick div，它是获得的 DOM 的第一个 child children方法。

onAfterRendering: function() {
    var cb = this.getView().byId("cb");
    $($(cb.getDomRef()).children()[0]).addClass("green");
}

Here是工作示例。