input使用:focus伪类后能否跳出span选中对应label及CSS实现方法

能否从:focus状态的input跨父级span选中对应label #

传统CSS选择器不支持向上遍历父元素，所以早期是无法直接从处于聚焦状态的input选中外层span后的label的。随着CSS :has() 父选择器的普及，现在现代浏览器已经可以实现这个需求。

对应结构的CSS实现方案 #

你给出的DOM结构如下：

<div class="custom_floating">
    <span>
        <input type="text" id="firstname">
    </span>
    <label for="floatingFirstName">First Name</label>
</div>

方案1：使用:has()选择器（兼容现代浏览器）

直接判断外层容器是否包含聚焦的input，再选中对应的label即可：

/* 匹配包含聚焦input的.custom_floating容器下的label */
.custom_floating:has(input:focus) label {
  /* 自定义聚焦样式，示例如下 */
  color: #1677ff;
  font-size: 12px;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}

该方案兼容Chrome 105+、Firefox 121+、Safari 15.4+，覆盖90%以上的全球活跃用户

方案2：兼容低版本浏览器的降级方案

如果需要兼容不支持:has()的旧浏览器，建议微调DOM结构，将input和label放在同一层级，删除不必要的span包裹，即可用相邻兄弟选择器实现效果：
调整后的DOM：

<div class="custom_floating">
    <input type="text" id="firstname">
    <label for="firstname">First Name</label>
</div>

对应的CSS：

input:focus + label {
  /* 自定义样式 */
  color: #1677ff;
}

注意事项 #

你当前示例代码中label的for属性值为floatingFirstName，和input的id值firstname不匹配，会导致点击label无法自动聚焦input的原生功能失效，建议修改为一致的值。

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