checkboxradio styling error

The checkbox tick is white on white

by kmbro

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css">
<div>
<input id="broken" type="checkbox"/>
<label for="broken">broken</label>
</div>
<div id="fix-tick-colour">
<input id="fixed" type="checkbox"/>
<label for="fixed">fixed</label>
</div>
<div>
jQueryUI bug <a href="https://bugs.jqueryui.com/ticket/15155">15155</a>
</div>

CSS

/* With this CSS in place the tick is black on white.  Without it the
** tick is white on white and therefore invisible.
**
** See https://bugs.jqueryui.com/ticket/15155
*/

#fix-tick-colour {
  margin: 1em 0;
}

#fix-tick-colour .ui-button.ui-state-active .ui-icon {
background-image: url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/images/ui-icons_222222_256x240.png");
}

JavaScript

$('input[type="checkbox"]').checkboxradio();