:invalid伪类失效主因是验证属性缺失或未触发校验；需设置required/pattern，配合用户交互或JavaScript强制校验，并用:invalid:not(:placeholder-shown)精准控制样式。
当 :invalid 伪类样式没反应，通常不是 CSS 写错了，而是表单元素的“有效性状态”没被浏览器正确触发——关键在于 required、pattern 和用户交互三者是否协同生效。
确保 required 或 pattern 已正确设置
:invalid 只在元素**本身具有原生验证约束**且当前值不满足时才生效。光写 input[type="text"] 不会触发，必须加验证属性：
- 有
required：空值即为 invalid（提交前或失焦后） - 有
pattern（如pattern="[0-9]{3}"）：值不匹配即 invalid - 两者可共存，优先级独立，任一不满足都触发
:invalid
注意 :invalid 的触发时机和条件
浏览器默认只在**用户与控件交互后**（如输入、失焦、提交）才开始校验并应用 :invalid。页面刚加载时，未操作过的 required 输入框其实是 :valid（空值但未触碰 → 被视为“未验证”而非“无效”）。
解决方法：
立即学习“前端免费学习笔记（深入）”；
- 给表单加
novalidate属性再手动控制，或 - 用 JavaScript 主动调用
checkValidity()或设置reportValidity()强制校验 - 更稳妥的 CSS 方案：同时使用
:user-invalid（Chrome 102+、Firefox 119+ 支持），它会在用户编辑后失焦即响应
border-color 提示要避免被其他样式覆盖
常见失效原因是 border 被重置或优先级不够：
- 确认没有更具体的规则（如
input:focus或.form-control）覆盖了:invalid的 border - 推荐写法：
input:invalid:not(:placeholder-shown) { border-color: #e53e3e; }，排除 placeholder 显示时的干扰 - 配合
outline: none时，记得补上 focus 状态的视觉反馈，否则可访问性下降
补充视觉提示：用 ::placeholder 或 background-image 增强反馈
单靠边框颜色可能不够明显，可叠加：
input:invalid:not(:placeholder-shown)::-webkit-input-placeholder { color: #e53e3e; }- 添加小图标：
background-image: url("data:image/svg+xml,...")配合background-position: right 8px center - 用
transition: border-color 0.2s让变色更自然
