如何在input:focus时为label设置样式？寻求纯CSS解决方案

你原来的CSS写法问题出在选择器上——你写的.input-container > input:focus .input-container > label是在找input元素内部的label，但实际上label和input是同级关系，而且还在input的前面，常规的兄弟选择器没法直接选中前面的元素。下面给你两种不用JS的纯CSS解决方案：

方案一：使用:focus-within伪类（无需修改HTML结构） #

:focus-within会匹配包含了获得焦点元素的父容器，利用这个特性可以直接选中容器内的label：

/* 默认状态下的label样式 */
.input-container > label {
  position: relative;
  transition: all 0.3s ease; /* 添加过渡动画让样式变化更平滑 */
}

/* 当容器内的input获得焦点时，修改label样式 */
.input-container:focus-within > label {
  color: green;
  font-size: 0.8em; /* 调整大小 */
  top: -15px; /* 调整位置，需配合relative定位 */
}

对应的HTML保持原结构即可：

<div class="input-container">
    <label>Input Label</label>
    <input />
</div>

方案二：调整DOM结构+兄弟选择器（兼容性更好） #

如果需要兼容不支持:focus-within的旧浏览器，可以把input放在label前面，用CSS调整显示顺序，再用相邻兄弟选择器+选中label：

修改后的HTML #

<div class="input-container">
    <input />
    <label>Input Label</label>
</div>

对应的CSS #

.input-container {
  display: flex;
  flex-direction: column;
}

/* 调整显示顺序，让label视觉上在input前面 */
.input-container > label {
  order: -1;
  position: relative;
  transition: all 0.3s ease;
}

/* 当input获得焦点时，修改后面的label样式 */
.input-container > input:focus + label {
  color: green;
  font-size: 0.8em;
  top: -15px;
}

两种方案都能实现需求：input聚焦时，label变为绿色、调整大小和位置，全程无需JavaScript。

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