Drupal 7中复选框与单选按钮验证失败无红边框的解决咨询

Drupal 7 中，验证失败的字段默认会显示红色边框，但复选框和单选按钮无法触发这个效果——原因是错误类（error）被添加到输入元素本身，而这类原生表单元素的边框样式无法通过常规CSS设置生效。

要解决这个问题，不需要修改后端代码，直接通过CSS定位错误字段的容器元素即可实现红色边框提示：

/* 方案1：给复选框/单选按钮的包裹容器加红色边框 */
.form-item.error .form-type-checkbox,
.form-item.error .form-type-radio {
  border: 2px solid #ff0000;
  padding: 2px;
  display: inline-block;
}

/* 方案2：给对应标签添加红色边框，视觉提示更明显 */
.form-item.error .form-type-checkbox label,
.form-item.error .form-type-radio label {
  border: 2px solid #ff0000;
  padding: 2px 4px;
}

说明 #

Drupal 7 默认会将error类添加到验证失败字段的外层.form-item容器上，通过上述CSS规则，我们可以针对容器内的复选框/单选按钮组件设置错误样式，既符合原生表单的错误提示逻辑，又能让用户清晰感知到错误位置。

内容的提问来源于stack exchange，提问作者Richard