cssformsdrupaldrupal-7

Checkboxes and radio buttons 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. 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 radio buttons 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