How To Change Background Color on CheckBox in Kendo Grid Column

We have a JavaScript/Angular web app that uses many "checkbox" controls on many web page forms.

We also use the Kendo grid (k-grid) in several places with checkbox columns that display the checkmark icon in the column. (Note these are "checkbox" and not "k-checkbox.)

Outside of the k-grid, the checkboxes show with a color background when the box is checked.

Inside the grid, the background color does not change between the checked and unchecked boxes.

Is there some way to get the background in the checkbox to be a given color when the checkbox is in the k-grid and is checked?

I tried setting the "accent-color" for the checkbox, but that didn't change anything when it is in the k-grid.

    input[type='checkbox']:checked {
        vertical-align: sub;
        -webkit-box-shadow: 0px 0px 0px 1px rgba(0,0,0,1);
        -moz-box-shadow: 0px 0px 0px 1px rgba(0,0,0,1);
        box-shadow: 0px 0px 0px 1px rgba(0,0,0,1);
        accent-color: #00ff00;
    }

This is in the .css file. I know the code is used, because I can change the color of the checkbox border and that shows up in the k-grid. But the accent-color does not show up.

Any suggestions?