CSS相邻兄弟选择器失效：如何选中嵌套input同级的外部label？

CSS的+（相邻兄弟选择器）和~（通用兄弟选择器）只能作用于同级的后续元素。你的<input>被包裹在<span>标签内，和<label>不属于同一层级，所以这两个选择器无法关联input:focus状态和<label>的样式。

方案1：修改HTML结构（最优） #

如果能调整插件生成的HTML结构，把<input>从<span>中移出，让它和<label>成为同级元素，原CSS即可生效：

<input/>
<span></span>
<label></label>

此时你的原始CSS代码就能正常工作：

input:focus+label {
  color: #1743fc;
  transform: translateY(1rem) translateX(0.5rem);
}

方案2：用JavaScript控制（无法改HTML时） #

通过监听<input>的focus和blur事件，给<label>添加/移除样式类：

// 获取元素
const inputEl = document.querySelector('span input');
const labelEl = document.querySelector('label');

// 监听聚焦事件，添加类名
inputEl.addEventListener('focus', () => {
  labelEl.classList.add('input-focused');
});

// 监听失焦事件，移除类名
inputEl.addEventListener('blur', () => {
  labelEl.classList.remove('input-focused');
});

然后在CSS中定义类的样式：

label.input-focused {
  color: #1743fc;
  transform: translateY(1rem) translateX(0.5rem);
}

方案3：使用:has()选择器（现代浏览器支持） #

如果<span>和<label>有共同的父容器，比如：

<div class="field-wrapper">
  <span>
    <input/>
  </span>
  <label></label>
</div>

可以用CSS的:has()选择器，通过父容器关联子元素状态和兄弟元素样式：

.field-wrapper:has(input:focus) label {
  color: #1743fc;
  transform: translateY(1rem) translateX(0.5rem);
}

注意：:has()选择器不支持IE浏览器，仅现代浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）可用。

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