输入内容后移除input对应label文本，仅用CSS能否实现？

完全可以仅通过CSS实现该需求，核心依赖CSS原生的:placeholder-shown伪类，该伪类仅在输入框无输入、占位符正常显示时匹配，输入框有内容时自动失效，正好符合你的需求场景。

• 改动步骤：

1. 给所有input标签添加空占位符属性，用于触发伪类识别（只需加一个空格即可，不会显示额外内容）：

<!-- 示例修改后的input，原有属性保留，新增placeholder=" " -->
<input type="email" id="login_email2812380460348143" class="text-input-input" name="login_email" value="" autocomplete="off" aria-invalid="false" inputmode="text" placeholder=" ">
<input type="password" id="login_password5101720956289264" class="text-input-input password-input" name="login_password" value="" autocomplete="off" aria-invalid="false" inputmode="text" placeholder=" ">

2. 修改原有CSS的隐藏规则，补充「输入框有内容」状态下的隐藏逻辑：

/* 仅需要修改原有选择器部分，其他CSS规则保留即可 */
.text-input-wrapper input:focus+label::before,
.text-input-wrapper input:active+label::before,
.text-input-wrapper input:not(:placeholder-shown)+label::before {
  display: none;
}

修改后只要输入框内有内容，不管是否处于聚焦状态，label的提示内容都会隐藏，不会和输入内容重叠。

如果需要兼容不支持:placeholder-shown的旧版浏览器，可以通过JS实现，无需改动原有HTML结构：

• 实现步骤：

1. 先补充CSS控制类，用于有内容时隐藏label：

.text-input-wrapper input.has-content + label::before {
  display: none;
}

2. 添加JS逻辑，动态判断输入框内容状态：

// 选中所有目标输入框
const inputs = document.querySelectorAll('.text-input-input');
inputs.forEach(input => {
  // 初始化判断是否有默认填充值
  toggleLabelState(input);
  // 监听输入、失焦、聚焦事件更新状态
  ['input', 'blur', 'focus'].forEach(eventName => {
    input.addEventListener(eventName, () => toggleLabelState(input));
  })
})

// 切换label显示状态的工具函数
function toggleLabelState(input) {
  input.value.trim() !== '' ? input.classList.add('has-content') : input.classList.remove('has-content');
}

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