cssdrupaldrupal-7

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


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:

No red error box for checkboxes

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.


Solution

  • 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:

    Working error border for checkboxes

    I hope this helps someone out there!