- A+
在现代网页开发中，CSS选择器与表单验证的结合可以实现无需JavaScript的状态样式动态变化。通过合理利用HTML5的表单属性和CSS伪类选择器，我们可以实时反馈用户输入状态，提升用户体验。
使用:focus、:valid 和 :invalid 实现基础验证样式
当用户在表单字段中输入内容时，浏览器会根据字段是否符合验证规则自动添加相应状态。我们可以利用这些内置状态来改变样式。
例如，给输入框添加边框颜色变化：
input:valid {
立即学习“前端免费学习笔记（深入）”；
border-color: green;
}
一个AI文本生成检测工具
108
查看详情
input:invalid {
border-color: red;
}
input:focus:invalid {
box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}
这样，未聚焦时不会显示错误，用户点击输入框后才开始提示，避免页面一加载就报错带来的压迫感。
结合 :required 与 :placeholder-shown 实现可选提示
对于必填项，可以在用户未输入时显示提示信息，并通过样式区分空值状态。
利用 :placeholder-shown 判断占位符是否可见（即输入为空），配合 :required 可以更精细控制样式。
input:required:invalid:placeholder-shown {
border-left: 4px solid orange;
}
input:required:valid {
border-left: 4px solid green;
}
这种方式可用于突出显示尚未填写的必填项，一旦输入内容且格式正确，左侧边框变为绿色。
使用 :checked 处理复选框与单选按钮状态
对于类型为 checkbox 或 radio 的表单控件，:checked 选择器非常有用。它可以配合label实现无JS的交互效果。
比如展示同意条款的视觉反馈：
input[type="checkbox"]:checked + label::before {
background-color: #4CAF50;
content: "✔";
}
通过相邻兄弟选择器（+），可以为被选中的选项附加图形标记，增强可读性。
动态样式提升用户体验
将多个状态组合使用，可以让界面更智能地响应用户操作。例如，仅在用户离开输入框后才触发错误提示：
input:invalid:not(:placeholder-shown):not(:focus) {
border-color: red;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
这条规则意味着：只有当输入无效、占位符已消失（即有输入）、且失去焦点时，才显示错误样式。这能有效减少干扰。
基本上就这些。利用CSS原生能力就能完成大部分基础表单状态反馈，不复杂但容易忽略细节。合理搭配选择器，能让表单更直观、更友好。
