直接用 input:valid 选择器设置边框颜色即可，但需输入框含 required、type="email" 等校验属性；推荐配合 :invalid:not(:placeholder-shown) 和 transition 实现柔和、体验友好的实时校验反馈。
直接用 input:valid 选择器设置边框颜色即可，但要确保输入框本身具备可校验的 HTML5 属性（如 required、type="email"、type="tel" 或 pattern），否则浏览器不会触发 :valid 状态。
基础写法与前提条件
只有带验证约束的表单控件才会响应 :valid。例如：
-
<input type="email" required>—— 输入合法邮箱时触发:valid -
<input pattern="[0-9]{6}">—— 输入恰好6位数字时才为:valid - 空的
required输入框初始即为:invalid，填入合规内容后自动切为:valid
推荐的 CSS 写法（兼顾体验）
避免用户刚打开页面就看到红边吓一跳，也防止 placeholder 显示时误判。建议组合使用伪类：
-
input:valid { border-color: #38a169; }—— 正确时绿色边框 -
input:invalid:not(:placeholder-shown) { border-color: #e53e3e; }—— 仅当用户已输入且内容错误时标红 - 加
transition: border-color 0.2s;让颜色变化更柔和
注意边界情况
:valid 是实时响应的，但依赖浏览器原生校验时机：
- 用户在输入过程中，浏览器通常不立即重验（比如输到一半的邮箱）
- 失去焦点（
blur）或提交时才会强制校验并更新状态 - Safari 对空
required字段的初始:invalid样式支持较弱，建议用:placeholder-shown做兜底判断 -
:valid不会向上影响父容器，如需给整个.form-group加样式，得靠 JS 添加类或使用:has()（需检查浏览器兼容性）
不需要 JavaScript，只要 HTML 结构合理、CSS 选择器精准，绿色边框就能自然出现。
