Drupal 7 - Checkboxes & radios that failed validation do not show a red box around them like other fields

Question

In Drupal 7, the default behavior for a field which fails validation is to show a red box as the border of the field. For example, if the field was required but no input was supplied.

This works great, but not for checkboxes! See below:

This is because the "error" class gets added to the input field itself, and checkboxes & radios don't let you style their borders (at the time of this writing).

But, I figure out how to make it work pretty simply. Answer posted below.

Answer 1

Since the checkboxes themselves actually have the "error" class, you need to use the :has() pseudo-element on its parent wrapper like so:

.form-checkboxes:has(.error) {
  border: 1px solid #c00;
}

As you can see, it's pretty simple CSS to add to your site. Here is the result:

I hope this helps someone out there!