如何用CSS选中后续含无效输入的Section Header标签并设置样式

当前表单场景中，输入框不符合pattern规则时，.control类下的关联标签会变为红色，但需要达成两个需求：

• 对应的Section Header（.sectionLabel类标签）同步变红
• 多输入字段场景下，任一字段无效时该Section Header就变红

解决方案 #

利用CSS的:has()选择器实现层级检测，当表单内存在无效字段时，触发Section Header的样式变化。

调整后的CSS代码

.sectionLabel {
  display: block;
  padding: 0.25em 1.1em;
  margin: 0 0 .1875em 0;
  cursor: pointer;
  background: #888888;
  border-radius: 0.2em;
  color: #FFFF;
  transition: ease .5s;
  position: relative;
}

.control:has(:invalid) {
  color: red;
}

/* 核心规则：表单内存在无效字段时，Section Header变红 */
form:has(.control:has(:invalid)) .sectionLabel {
  color: red;
}

多字段场景的HTML示例

<form>
  <label id="mylabel" class="sectionLabel">Section Header</label>
  <div>
    <br>
    <div class="control">
      <label for="nodeName">Node Name</label>
      <input id="nodeName" name="nodeName" pattern="^([A-Za-z_][A-Za-z0-9_]*(\.[A-Za-z0-9_]+)*)+[\.:]([A-Za-z_][A-Za-z0-9_]*)$" value="test" />
    </div>
    <br>
    <div class="control">
      <label for="nodeType">Node Type</label>
      <input id="nodeType" name="nodeType" pattern="^[A-Za-z_][A-Za-z0-9_]*$" value="123-" />
    </div>
  </div>
  <br>
  <button class="submitButton" type="submit">Submit</button>
</form>

原理说明 #

通过两层:has()选择器嵌套：

1. 第一层form:has(...)检测表单内是否存在符合条件的.control容器
2. 第二层.control:has(:invalid)检测容器内是否存在无效的输入字段
   只要任一输入字段不符合规则，就会触发Section Header的文字颜色变为红色，满足需求。

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