Small checkbox coloring issue

WEB TMS WEB Core
1

In the web application I am currently developing, my customer wants a colored rectangle around checked checkboxes. I created a CSS definition to do so and this works fine, except that the color of the checkmark differs, as shown in attached screenshot.
ScreenShot

I made a small demo program containing this example and the CSS I am using to make this colored rectangle. I tried to use extra CSS definitions, but I don't know the element reference I should use for it.
CSSColoring.zip (7.0 KB)

Thank you for helping me out on this one.

2

To have these both the same, use something like

    <style>
      .ChkBackground {
        font-size: 14px;
        cursor: pointer;
        color: white;
        background-color: #0075FF;
      }
      checkbox.ChkBackground {
        font-size: 14px;
        cursor: pointer;
        color: white;
        background-color: red;
      }
      .chkbkg { accent-color: #0075FF; }
    </style>

and assign chkbkg to WebCheckBox.ElementButtonClassName