如何实现input嵌套在span中时:focus与:valid关联label的样式效果？

首先把原来的样式抽成一个可复用的CSS类，方便JS控制：

/* 输入框激活状态下的label样式 */
.user-box .active-label {
  top: 0;
  left: 0;
  color: #17BEBE;
  font-size: 14px;
}

然后通过JS监听输入框的交互事件，动态切换label的类：

// 获取所有输入框容器
const userBoxes = document.querySelectorAll('.user-box');

userBoxes.forEach(box => {
  const input = box.querySelector('input');
  const label = box.querySelector('label');

  // 页面加载时，若输入框已有内容，直接激活label样式
  if (input.value.trim()) {
    label.classList.add('active-label');
  }

  // 输入框聚焦时激活label
  input.addEventListener('focus', () => {
    label.classList.add('active-label');
  });

  // 输入框失焦时：为空则取消激活，有内容则保持
  input.addEventListener('blur', () => {
    if (!input.value.trim()) {
      label.classList.remove('active-label');
    }
  });

  // 输入内容时实时同步状态（优化体验）
  input.addEventListener('input', () => {
    input.value.trim() ? label.classList.add('active-label') : label.classList.remove('active-label');
  });
});

逻辑说明 #

• 以.user-box为容器查找内部的input和label，不依赖id，适配更多场景
• 页面初始化时检查输入框内容，避免已有内容但label未激活的问题
• 聚焦事件触发时直接激活label样式，和原CSS的:focus效果一致
• 失焦事件结合内容判断，实现原CSS:valid（非空）的效果
• 增加input事件监听，让label状态随输入内容实时变化，提升交互流畅度

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