CSS实现input聚焦触发label样式变换失效如何解决

云上老周

2026-8-26

故障原因

相邻兄弟选择器 + 的匹配规则是选中目标元素后面紧邻的同层级兄弟节点，无法匹配排在目标元素前面的节点。
你当前的DOM结构里，.user-label 排在 .user-input 前面，所以 .user-input:focus + .user-label 这个选择器根本匹配不到对应的label元素，自然不会触发样式变化。你之前能正常修改input自身样式，是因为选择器直接命中了input本身，和兄弟选择器逻辑无关。

修复方法

二选一即可：

方法1（兼容性最好，最常用）：调整DOM顺序，把input放到label前面，原有CSS代码完全不用改动，就能正常触发效果。调整后的HTML结构：

<div class="container">
  <div class="input-group">
    <input type="text" name="user" class="user-input" required>
    <label for="user" class="user-label">Username</label>
  </div>
</div>

label的初始视觉位置可以靠CSS定位调整到你想要的输入框内/上方位置，不影响交互效果。

方法2（无需调整DOM，注意兼容性）：使用:has()伪类匹配包含聚焦/有效输入框的父级元素，再选中内部label，替换原有CSS即可：

.input-group:has(.user-input:focus) .user-label,
.input-group:has(.user-input:valid) .user-label {
  color: yellow;
  transform: translate(10px, -14px) scale(.8);
}