如何使邮箱输入框标签在输入任意文本后保持变换位置

嘿，我来帮你搞定这个标签位置的问题！

问题根源 #

你现在用的:valid伪类是依赖输入框的表单验证规则来触发的——只有当用户输入的内容符合邮箱格式（或者你设置的其他验证规则）时，这个伪类才会生效。这就是为什么只有输入有效邮箱并失焦后标签才会保持位置，输入无效内容时就打回原形啦。

解决方案：用:not(:placeholder-shown)替代:valid #

我们可以换个思路：不管输入内容是否有效，只要输入框里有文字（占位符被内容盖住，不再显示），就让标签保持变换后的位置。这时候input:not(:placeholder-shown)这个伪类组合就正好能满足需求。

具体代码修改

把你原来的CSS规则：

.contact-form .input-text:valid + .label {
  font-size: 14px;
  font-weight: 600;
  bottom: 30px;
  /* 其他你设置的变换样式 */
}

替换成：

.contact-form .input-text:not(:placeholder-shown) + .label {
  font-size: 14px;
  font-weight: 600;
  bottom: 30px;
  /* 其他你设置的变换样式 */
}

注意事项

• 确保你的输入框设置了placeholder属性（哪怕是空的placeholder=""也行），因为:placeholder-shown伪类需要占位符存在才能正常工作。如果你的输入框原本没有占位符，加上这个空占位符就好，不会影响用户体验。
• 如果想要在输入框聚焦时也让标签保持变换状态，可以把:focus伪类也加进去，组合成：

  .contact-form .input-text:focus + .label,
  .contact-form .input-text:not(:placeholder-shown) + .label {
    font-size: 14px;
    font-weight: 600;
    bottom: 30px;
    /* 其他你设置的变换样式 */
  }
  

完整示例参考 #

<div class="contact-form">
  <input type="email" class="input-text" placeholder="" />
  <label class="label">邮箱地址</label>
</div>

.contact-form {
  position: relative;
  margin: 20px 0;
}

.contact-form .input-text {
  width: 100%;
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid #ccc;
  font-size: 16px;
  background: transparent;
}

.contact-form .label {
  position: absolute;
  left: 0;
  bottom: 10px;
  font-size: 16px;
  color: #999;
  transition: all 0.3s ease;
  pointer-events: none;
}

/* 核心规则：聚焦或有内容时变换标签 */
.contact-form .input-text:focus + .label,
.contact-form .input-text:not(:placeholder-shown) + .label {
  font-size: 14px;
  font-weight: 600;
  bottom: 30px;
  color: #2c3e50;
}

这样调整后，不管用户输入的是有效邮箱还是随便打几个字，只要输入框里有内容，标签就会一直保持在变换后的位置啦！

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