:valid伪类用于匹配符合规则的表单输入，结合:invalid可实现无JS的实时验证。通过设置border颜色、过渡动画和阴影效果，如input:valid时边框变绿并添加绿色阴影，input:invalid时变红并提示，提升用户体验。支持email、url、number、required、pattern等类型，无需JavaScript即可完成基础样式反馈。
在CSS中，可以利用:valid伪类来实现表单输入的实时验证提示，比如根据输入内容是否符合规则自动改变边框颜色。这种方式无需JavaScript，仅用CSS就能提升用户体验。
什么是:valid伪类
:valid 是一个CSS伪类，用于匹配当前值符合输入类型要求的表单元素。例如，一个 type="email" 的输入框，只有当用户输入的是合法邮箱格式时，才会被 :valid 选中。
结合:valid改变输入框边框颜色
通过为 input:valid 设置样式，可以在用户输入有效内容时动态改变边框颜色，直观地给予反馈。
示例代码：
立即学习“前端免费学习笔记（深入）”；
input:valid {
border: 2px solid green;
}
input:invalid {
border: 2px solid red;
}
这样，当输入内容合法时边框变绿，不合法时变红，视觉反馈清晰。
增强用户体验的小技巧
为了让提示更友好，可以加入过渡动画，并配合背景色或阴影强化效果。
input {
padding: 10px;
border: 2px solid #ccc;
border-radius: 4px;
transition: border-color 0.3s ease;
}
input:valid {
border-color: #28a745;
box-shadow: 0 0 5px rgba(40, 167, 69, 0.3);
}
input:invalid {
border-color: #dc3545;
box-shadow: 0 0 5px rgba(220, 53, 69, 0.3);
}
transition 让颜色变化更平滑，box-shadow 增加视觉层次，帮助用户快速识别状态。
支持的表单类型和约束
:valid 和 :invalid 可作用于多种输入类型，包括：
只要设置了这些属性，CSS的伪类就能自动生效。
基本上就这些。使用 :valid 和 :invalid 能在不写JS的情况下实现基础表单验证样式，简单高效。
