How do you suppress the standard HTML 5 look of checkboxes and radio buttons in favour of an overlay in Ext JS 7 classic?

In Ext JS 7, how would you suppress the standard HTML 5 look of checkboxes and radio buttons in favour of a custom look?

We've just upgraded our Ext JS library to version 7.1.0, and we like the standard HTML 5 look of the check boxes and radio buttons. The trouble is, the blue doesn't match what we're using for our push buttons, and the standard controls don't give any obvious show of when they have focus. (The Ext JS library attempts to fix the latter by putting a dot next to the control that has focus, but it's very easy to miss.)

For each of these, we are trying to use a custom image that mimics the look of the HTML 5 checkbox/radio button, but with colours that match our push buttons in both the focused and non-focused states. (We're specifying it in CSS.) Trouble is, the new library overlays the standard HTML 5 checkbox or radio button on top of that, so we don't see our custom image.

Is there a way to suppress/hide the standard HTML 5 checkboxes and radio buttons to let our background/overlay image show? I found this question which attempts to do it in CSS, but it didn't work for me.

The CSS that we're using is like this:

.x-form-radio-default {
  background: url(images/form/radio-custom.png) no-repeat;
}
.x-form-checkbox-default {
  background: url(images/form/checkbox-custom.png) no-repeat;
}