基础概念与实现思路
:invalid 伪类的工作原理
在 HTML5 表单中，当字段未通过校验时，浏览器会触发 :invalid 伪类。伪类使样式只在无效状态下生效，从而实现无需 JavaScript 的校验样式。它依赖于浏览器原生的验证算法，如 required、type、pattern 等。设计要点是确保在无效时显示清晰的边框变化或阴影，以避免用户困惑。
通过结合 :focus、:invalid、:valid，可以在输入获得焦点时强化提示。为了良好的可访问性，保持对比度并避免仅在颜色上表示错误。
/* 伪类示例：当字段无效时变为红色边框 */
input:invalid {border-color: #e00;box-shadow: 0 0 0 3px rgba(224,0,0,.15);
}
input:focus:invalid {outline: none;border-color: #b00;
}
使用 border-color 与阴影实现视觉提示
border-color 用于定义边界颜色；box-shadow 可以提供更强的边界强调而不破坏布局。
在设计中，建议用 两段式风格：普通状态默认边框，聚焦后边框颜色变更，错误状态时边框颜色为红色并给出轻微阴影。这样可以兼容大多数浏览器和高对比度模式。
/* 输入框在无效时的完整视觉提示 */
input {border: 1px solid #ccc;border-radius: 6px;padding: 8px 12px;transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus {border-color: #66f;box-shadow: 0 0 0 3px rgba(102,102,255,.15);
}
input:invalid {border-color: #e60023;box-shadow: 0 0 0 3px rgba(230,0,23,.15);
}
完整实践：从样式设计到可访问性
结构与选择器设计
为确保可维护性，把样式分离到独立的 CSS 文件，对同一组输入使用统一的 class，如 .input-field。在 :invalid 之外，还可结合 :valid 以提供正向反馈。
示例中，使用 HTML5 校验规则，如 required、type="email"、pattern 等，来触发无效状态。请确保默认状态的可读性。
/* 通用输入字段样式（分离、可复用） */
.input-field {width: 100%;border: 1px solid #ccc;padding: 10px 12px;border-radius: 6px;transition: border-color .2s, box-shadow .2s;
}
.input-field:focus {border-color: #66f;outline: none;box-shadow: 0 0 0 3px rgba(102,102,255,.15);
}
.input-field:invalid {border-color: #e60023;box-shadow: 0 0 0 3px rgba(230,0,23,.15);
}
.input-field:valid {border-color: #0a0;
}
状态过渡与可访问性
为无障碍用户服务，除了色彩对比，还应提供文字指示。aria-invalid 与 aria-describedby 可以向屏幕阅读器传达错误信息。
以下示例显示如何在无效状态时设置 aria-invalid，并关联辅助文本区域，以实现屏幕阅读器的提示。
请输入有效的电话号码，例如 +1 555 0100。
错误信息的可视性与屏幕阅读器一致性
为了确保错误信息对所有用户都可用，可以结合 aria-live 与可描述文本来讲述错误原因，同时保留 :invalid 的视觉样式，以供视觉用户快速识别。
不同输入类型的边框提示实践
文本与邮箱输入的错误指示
文本输入通常需要 pattern 或 minlength，而邮箱需要 type="email"。使用 :invalid 可以快速实现一致的错误样式，并在聚焦时增强焦点样式。
结合示例，确保占位文本与错误信息的对比度，使用户在混合背景下也能看清边框变化。
/* 邮箱输入的无效样式示例 */
input[type="email"]:invalid {border-color: #e60023;box-shadow: 0 0 0 3px rgba(230,0,23,.15);
}
数字与日期输入的边框提示
对于数字（type="number"）和日期（type="date"）等系统控件，浏览器原生的校验也会影响 :invalid 的触发。保持一致的视觉语言，避免让不同控件有完全不同的错误风格。
/* 数字输入的无效样式 */
input[type="number"]:invalid {border-color: #e60023;background: #fff6f6;
}
