cssformsdrupaldrupal-7

Checkboxes and radios that fail validation do not get a red border


In Drupal 7 default behavior for a field which fails validation is to show a red border.

For example if the field is required but no input was supplied. This does not work for checkboxes, however.

EDIT: At request for clarification for desired behavior: The desired behavior is that checkboxes which fail validation should also show with a red border.

No red error box for checkboxes

This is because the "error" class gets added to the input field, but checkboxes and radios don't let you style borders.

How can I make it work for these elements too?


Solution

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

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

    The result:

    Working error border for checkboxes