html5 required属性需结合:required和:user-invalid伪类实现视觉提示与校验反馈：:required添加星号标识，:user-invalid在用户交互后触发红框错误态，并配合label文字、aria-required和aria-live提升可访问性。
HTML5 的 required 属性本身不提供视觉提示，但结合 :required 和 :invalid 等伪类，就能在用户未填写时直观标出必填项——关键是让样式既清晰又符合交互逻辑。
用 :required 为必填字段添加视觉标识
该伪类匹配所有带 required 属性的表单控件，适合加星号、边框色或背景提示。
示例 CSS：
input:required,
select:required,
textarea:required {
position: relative;
}
input:required::after,
select:required::after,
textarea:required::after {
content: " *";
color: #e74c3c;
font-size: 0.9em;
margin-left: 4px;
}
注意：::after 在 <input> 上生效需设 display: inline-block 或使用 <label></label> 包裹更稳妥；推荐把星号放在 label 后更语义化。
用 :invalid 配合 :user-invalid 做实时校验反馈
:invalid 在字段值不符合约束（如空、格式错）时触发，但默认会在页面加载后立即生效。为避免“未操作就报错”，应搭配 :user-invalid（Chrome 102+、Firefox 119+ 支持），它只在用户与字段交互后才激活。
推荐写法：
- 基础状态：用浅色边框表示常规输入
- 聚焦中：
:focus加深边框，提升可访问性 - 错误态：
:user-invalid:focus显示红框 + 错误图标或文字提示
input,
select,
textarea {
border: 1px solid #ccc;
transition: border-color 0.2s;
}
input:focus,
select:focus,
textarea:focus {
border-color: #3498db;
}
input:user-invalid:focus,
select:user-invalid:focus,
textarea:user-invalid:focus {
border-color: #e74c3c;
outline: none;
}
增强可访问性与用户体验的小技巧
纯视觉提示对屏幕阅读器用户无效，必须配合语义化处理：
- 必填字段的
<label></label>中明确写“（必填）”，例如：<label>邮箱地址（必填）</label> - 用
aria-required="true"强化声明，尤其对动态渲染的表单 - 提交失败时，用
aria-live="polite"容器播报错误信息，例如：“请填写手机号” - 避免仅靠颜色区分状态，可叠加图标（⚠️）、粗体或下划线提升辨识度
兼容性与降级处理要点
:user-invalid 尚未全平台支持，老版 Safari 和部分安卓浏览器仍依赖 :invalid。稳妥做法是：
- 用 JavaScript 监听
input和blur事件，手动添加.is-invalid类 - CSS 中同时定义：
input:invalid, input.is-invalid，兼顾原生与脚本逻辑 - 对不支持伪类的旧浏览器，至少保证
required属性触发原生验证气泡（无需额外样式）
不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
