checkbox/radio UI styling incompatibility with HTML5 "required" attribute

[PV9685]

When using HTML5 form field validation it is common to think to simply "highlight invalid input fields when the user clicks submit by making them required". For other fields, adding the Required attribute and a bit of css such as below will highlight the invalid fields. Unfortunately, due to the design of these in JQueryUI checkbox/radio items do not display any affect.

textarea:invalid, select:invalid, input[type=text]:invalid, input[type=radio]:invalid, input[type=checkbox]:invalid {
  border: 2px dashed red;
  box-shadow: 0 4px 6px 0 red, 0 6px 18px 0 #D4D400;
}