HTML/CSS浮动标签表单故障：email输入框标签无法稳定上浮

email输入框的type="email"自带格式验证逻辑，你CSS中使用的:valid伪类只有当输入内容完全符合邮箱格式标准时才会生效。当输入内容但格式不符合（比如仅输入一串字母），失去焦点后:valid状态会消失，标签随之回落。而text类型输入框只要非空就满足:valid（因设置了required），所以不会出现这个问题。

方案一：改用:not(:placeholder-shown)伪类（推荐） #

替换CSS中控制标签上浮的选择器，用:not(:placeholder-shown)替代:valid，这样只要输入框有内容，不管格式是否正确，标签都会保持上浮状态。同时给所有输入框和textarea添加空的placeholder属性（:placeholder-shown需要依赖placeholder才能生效）。

修改后的CSS：

.input-group input:focus~label,
.input-group input:not(:placeholder-shown)~label,
.input-group textarea:focus~label,
.input-group textarea:not(:placeholder-shown)~label {
  top: 0;
  font-size: 12px;
  background: white;
}

修改后的HTML：

<div class="contact-form">
  <h3>发送消息</h3>
  <form action="submit">
    <div class="input-group">
      <input type="text" id="name" name="name" required placeholder=" ">
      <label for="name">姓名</label>
    </div>
    <div class="input-group">
      <input type="text" id="phone" name="phone" required placeholder=" ">
      <label for="phone">电话</label>
    </div>
    <div class="input-group">
      <input type="email" id="email" name="email" required placeholder=" ">
      <label for="email">邮箱</label>
    </div>
    <div class="input-group">
      <textarea required name="message" id="message" cols="50" rows="10" placeholder=" "></textarea>
      <label for="message">消息</label>
    </div>
  </form>
  <button type="submit">发送</button>
</div>

方案二：保留:valid但兼容email输入 #

如果希望只有合法内容才保持标签上浮，可以给email输入框添加pattern属性定义宽松的验证规则，比如只要包含@符号就判定有效：

<input type="email" id="email" name="email" required pattern=".+@.+">

这样输入包含@的内容后标签就会固定，同时提交时浏览器仍会执行基础的邮箱格式验证。

方案一的优势在于无需关心输入内容格式，只要用户输入了内容，标签就会固定在上部，更符合常规交互预期，避免因格式验证导致的标签跳动问题。

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