怎样通过CSS的:has伪类检测表单是否有未填必填项-css教程-PHP中文网

form:has(input:required:invalid)可直接检测未填必填项，Chrome 105+/Firefox 121+/Safari 15.4+支持；需显式写元素名，textarea/select同理但要注意默认option和校验触发条件；避免display切换导致闪烁，推荐opacity+height过渡；复杂逻辑需JS辅助。

怎样通过css的:has伪类检测表单是否有未填必填项

用 `:has(input:required:invalid)` 检测未填必填项最直接

只要表单里存在一个带 required 属性且当前值无效（包括空值）的 input，form:has(input:required:invalid) 就能匹配整个表单。它不依赖用户是否失焦或提交，Chrome 105+/Firefox 121+/Safari 15.4+ 均可立即响应。

注意点：

input:required:invalid 是关键组合——单写 :invalid 可能匹配非必填字段（如邮箱格式错），单写 :required 不反映填写状态
如果表单含 select，需确保默认无 value 且设 disabled selected，否则浏览器可能视其为有效值，跳过 :invalid
:has() 不支持伪元素或属性选择器嵌套，不能写成 :has(input[required]:invalid)，必须用原生伪类链式写法

`:has()` 查不到 `textarea` 或 `select`？检查结构和伪类支持

textarea:required:invalid 和 select:required:invalid 同样生效，但容易踩两个坑：

textarea 若没设 required 属性，或内容为空但未触发校验（如未失焦），:invalid 不会激活；建议加 minlength="1" 强化初始校验
select 没有 :placeholder-shown，无法用 :not(:placeholder-shown) 过滤“刚点开未选”状态；稳妥做法是用 select:required:invalid:not(:valid)，排除已选有效项的干扰
若 select 的第一个有 value=""，即使加了 disabled，部分 Safari 版本仍可能判定为有效，导致 :invalid 不触发

为什么 `form:has(:invalid)` 不行？必须显式写出元素名

:has(:invalid) 是无效语法。浏览器会忽略整条规则，因为 :invalid 伪类只对原生表单控件（input、textarea、select）有效，且 :has() 参数中不允许省略标签名。

错误写法示例：

form:has(:invalid) { background: #fee; } /* ❌ 无效，浏览器静默丢弃 */

正确写法必须明确指定目标元素：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

form:has(input:invalid, textarea:invalid, select:invalid) { background: #fee; }

但这样会把“非必填但输错”的字段也计入，偏离“未填必填项”的原始意图。所以优先用 input:required:invalid 等精确组合。

联动反馈时，`.error-summary` 显示逻辑要避开 display 切换

常见错误是给汇总提示设 display: none，再靠 form:has(input:required:invalid) .error-summary { display: block; } 控制显隐。这会导致快速输入/删除时闪烁。

更稳的做法：

让 .error-summary 始终在 DOM 中，仅控制 opacity 和 height 过渡
用 form:has(input:required:invalid) .error-summary { opacity: 1; height: auto; }，默认设 opacity: 0; height: 0; overflow: hidden;
避免用 visibility: hidden，它虽不占布局空间但会阻止屏幕阅读器读取，影响无障碍

真正难的是多字段语义聚合——比如“姓名或手机号至少填一个”，此时 :required:invalid 失效，得退回到 :has(input:not(:placeholder-shown)) + JS 辅助判断，:has() 本身不提供“逻辑或”运算能力。