I am using a jquery-ui checkbox within a container that has class ui-widget-content on it. This is causing the ".ui-widget-content .ui-state-hover" css rule that defines the background property to override the .ui-icon-check rule that defines the correct background-position for the checkbox image. I believe this is because it is more specific.

The result is that a checkbox within a widget shows the wrong image. How should I handle this?

Here is a jsfiddle example. In the second div where I have the ui-widget-content class, you can see the checked image is wrong.

<div class="ui-widget-content"> <label for="cb3">Test 1</label> <input type="checkbox" id="cb3" class="toggle"/> <label for="cb4">Test 2</label> <input type="checkbox" id="cb4" class="toggle" checked="checked"/> </div>

Note that I can't change the parent div. I am working within a dialog that requires that class.

I am surprised I can't find anybody else complaining about this. I am not sure what I am missing.