在Web表单开发中，让输入框根据用户输入是否合法实时改变外观，是提升交互体验的重要手段。传统做法依赖JavaScript监听事件并手动添加或删除类名，而现代浏览器提供的CSS伪类选择器可以直接绑定表单控件的验证状态，实现无脚本或弱脚本的样式动态变化。
一、核心CSS选择器与HTML验证属性
要实现状态样式的动态变化，首先要了解CSS中专门用于表单验证的伪类选择器。它们由浏览器根据HTML5约束验证API的结果自动匹配，不需要开发者手动维护状态。
最常用的几个选择器包括:valid、:invalid、:required和:optional。其中:valid表示控件当前值通过了自身所有的约束条件，:invalid则表示未通过。这两个伪类会随用户输入实时更新。而:required用于选中带有required属性的控件，:optional选中没有该属性的控件。这些选择器必须配合HTML的验证属性使用，例如required、pattern、min、max、minlength等。
下面是一个基础示例，展示了如何用纯CSS实现输入合法时绿边、不合法时红边的效果：
<form>
<label>用户名（至少3个字符）：
<input type="text" name="user" minlength="3" required>
</label>
<label>邮箱：
<input type="email" name="email" required>
</label>
</form>
input:valid {
border: 2px solid #2ecc71;
}
input:invalid {
border: 2px solid #e74c3c;
}
input:required {
background-color: #fdfdfd;
}
上述代码中，浏览器会自动判断每个input是否满足约束。需要注意的是，在页面刚加载时，必填框为空，此时:invalid已经生效，因此用户还没输入就会看到红框。这是原生验证伪类的一个典型特征，实际项目中往往需要结合其他选择器来优化首屏体验。
二、避免初始误报的进阶技巧
由于:invalid在空值必填状态下就会触发，直接全局使用红框会造成“还没填就报错”的错觉。一种简单有效的办法是仅在控件获得焦点或包含内容后才展示错误样式。
我们可以利用:focus伪类，或者借助:not(:placeholder-shown)来判断用户是否输入了内容。如果输入框设置了placeholder，那么未输入时placeholder是显示的，输入后消失，这个状态可以被CSS捕获。结合:invalid就能做到“用户动了输入框且内容非法才变红”。
示例代码如下：
input {
border: 2px solid #ccc;
}
input:focus:invalid:not(:placeholder-shown) {
border-color: #e74c3c;
}
input:focus:valid:not(:placeholder-shown) {
border-color: #2ecc71;
}
<input type="text" placeholder="请输入手机号" pattern="1[0-9]{10}" required>
这里:not(:placeholder-shown)确保只有当placeholder隐藏（即用户键入内容）时才应用颜色变化。这种组合大幅降低了初始误报率，同时保留了实时反馈的优势。如果某些输入框不需要placeholder，也可以用JS在首次输入后给form加上一个类，再用该类限制:invalid的作用范围。
三、复杂校验场景与pattern结合
除了必填和长度，很多表单需要格式校验，比如手机号、密码强度、身份证号等。HTML的pattern属性接收正则表达式，CSS的:valid和:invalid会自动反映匹配结果。
以密码框为例，要求至少8位且包含字母和数字，可以用pattern="(?=.*[A-Za-z])(?=.*d).{8,}"。当用户输入不符合规则时，控件立刻变为invalid状态。我们还可以用兄弟选择器+或~联动提示文字的显示。
参考下面的结构与样式：
<form>
<input type="password" id="pwd" placeholder="密码"
pattern="(?=.*[A-Za-z])(?=.*d).{8,}" required>
<span class="tip">需8位以上且含字母和数字</span>
</form>
.tip {
color: #999;
font-size: 12px;
}
input:invalid:not(:placeholder-shown) ~ .tip {
color: #e74c3c;
}
input:valid ~ .tip {
color: #2ecc71;
}
这种写法让提示文字随校验状态变色，无需任何脚本。不过要注意，pattern中的正则语法是JavaScript风格，且必须匹配整个值，部分匹配不会通过。另外，过于复杂的正则可能导致用户困惑，配合清晰的提示文案会更好。
四、与JavaScript的配合边界
纯CSS方案虽好，但也有局限。例如跨字段校验（如确认密码一致）、异步校验（如用户名是否被注册）无法仅靠伪类完成。此时可以用JS设置自定义合法性，通过调用控件的setCustomValidity方法影响:valid与:invalid的匹配。
示例：确认密码框在失焦时比对两次输入，如果不一致则标记为非法。
var pwd = document.getElementById('pwd');
var confirm = document.getElementById('confirm');
confirm.addEventListener('blur', function() {
if (confirm.value !== pwd.value) {
confirm.setCustomValidity('两次密码不一致');
} else {
confirm.setCustomValidity('');
}
});
<input type="password" id="pwd" required> <input type="password" id="confirm" required>
调用setCustomValidity并传入非空字符串会使控件进入invalid状态，CSS样式随即响应；传空字符串则恢复浏览器原生判断。这样就把脚本逻辑无缝接入了CSS驱动的状态样式体系，兼顾灵活性与简洁性。
五、兼容性与实践建议
上述伪类在现代浏览器（Chrome、Firefox、Edge、Safari 10+）中均受支持，但在非常老旧的环境里可能失效。如果项目需要兼容IE，就必须退回JS类名方案。此外，移动端部分浏览器对:invalid的实时触发有轻微延迟，属于正常表现。
实践上建议：简单表单优先使用CSS选择器实现状态样式，减少JS负担；涉及服务端交互或复杂逻辑时，用setCustomValidity桥接。始终给用户输入缓冲，不要一上来就标红。合理组合:focus、:placeholder-shown与验证伪类，能做出体验平滑、代码轻量的表单验证界面。