输入框标签重叠问题求助：Email输入框标签覆盖输入内容

问题根源 #

这种差异通常是因为Email输入框的CSS逻辑仅监听了focus（聚焦）状态，没有处理输入框已有内容的情况。当输入内容后点击外部失去焦点，focus伪类失效，标签回到原位，就会覆盖输入的文本。而Password输入框大概率额外做了“非空状态”的判断，所以表现正常。

修复方案 #

核心思路：同时监听聚焦和非空状态 #

不管输入框是否聚焦，只要里面有内容，就让标签保持上移状态。可以通过:not(:placeholder-shown)伪类实现（需要配合空占位符），步骤如下：

1. 调整HTML结构（确保统一）

给两个输入框都加上空占位符和一致的结构：

<div class="input-group">
  <input type="email" id="email" placeholder=" " required>
  <label for="email">Email</label>
</div>
<div class="input-group">
  <input type="password" id="password" placeholder=" " required>
  <label for="password">Password</label>
</div>

2. 修改CSS选择器

更新标签的触发条件，同时包含聚焦和非空两种情况：

.input-group {
  position: relative;
  margin: 1.5rem 0;
}

.input-group input {
  width: 100%;
  padding: 0.9rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  background: #fff;
}

.input-group label {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  color: #888;
  transition: all 0.25s ease;
  pointer-events: none;
}

/* 聚焦时标签上移 + 输入框有内容时保持上移 */
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
  top: -0.6rem;
  left: 0.6rem;
  font-size: 0.8rem;
  color: #1976d2;
  background: #fff;
  padding: 0 0.3rem;
}

关键细节说明 #

• 必须给输入框加placeholder=" "（注意是单个空格），否则:not(:placeholder-shown)无法正确识别输入框是否有内容。
• 不要用:valid替代:not(:placeholder-shown)，因为:valid依赖输入内容符合格式（比如Email必须是合法格式），而:not(:placeholder-shown)只要输入框非空就生效，兼容性和通用性更强。
• 检查现有代码：如果Email输入框的CSS只写了input:focus + label，没有加非空状态的判断，就会出现点击外部标签回落的问题。

修改完成后，Email和Password输入框的交互逻辑就会完全一致：点击输入框标签上移，输入内容后即使失去焦点标签也保持上移，只有清空内容后标签才会下移。

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