如何仅用CSS在表单存在无效元素时显示错误提示区块？

想要仅用CSS实现：当页面中带有required属性且拥有.required类的input元素处于:invalid状态时，显示id为message的错误区块。已知可通过JavaScript实现，但希望尽可能只用CSS完成，尝试的代码未生效，问题在于input元素可能位于HTML中的任意位置（并非错误div的相邻兄弟元素）。

原代码示例 #

HTML代码

<div id="message">
  error.
</div>

<input class="required" required>

<table>
  <tr>
    <td>
      <input class="required" required>
    </td>
  </tr>
</table>

CSS代码

#message {
  display: none;
}

#message:has(:root .required:invalid) {
  display: block;
}

.required:invalid {
  background: red;
}

解决方案 #

你的CSS写法有误，:has()选择器的使用逻辑不对，且:root的用法不符合需求。正确的做法是借助父元素（比如<body>）的:has()选择器来检测页面中是否存在无效的input元素，进而控制错误区块的显示。

修改后的CSS代码：

#message {
  display: none;
}

body:has(.required:invalid) #message {
  display: block;
}

.required:invalid {
  background: red;
}

说明

• body:has(.required:invalid) 会选中页面中存在处于:invalid状态的.required元素的<body>
• 随后通过后代选择器定位到#message，将其display属性改为block以显示错误信息

注意：:has()选择器需要浏览器支持，现代主流浏览器（Chrome、Edge、Safari 15.4+）已原生支持，Firefox需在about:config中开启layout.css.has-selector.enabled选项才能使用。

内容的提问来源于stack exchange，提问作者user21110355