移除required属性后表单浮动标签失效问题求助

问题原因 #

1. 移除required后标签失效：原CSS依赖:valid伪类判断标签上浮，但无required的输入框默认状态就是:valid，无法区分空值和已输入内容的状态，导致空值时标签错误上浮，输入后反而没有变化。
2. 邮箱输入标签仅合法时上浮：同样是:valid的限制——只有输入符合邮箱格式时才触发上浮，而实际需求是只要输入内容就让标签保持上浮，格式验证不应影响视觉交互。

解决办法 #

核心是把CSS中触发标签上浮的条件从:valid替换为:not(:placeholder-shown)，这个伪类会在输入框内容不为空（占位符隐藏）时触发，完美适配必填/非必填字段，且不受输入格式影响。

修改后的HTML #

<div class="form">
  <form class="box" action="#">
    <div class="input-container">
      <input type="text" id="vname" name="vname" required placeholder=" ">
      <label for="vname">Vorname*</label>
    </div>

    <div class="input-container">
      <input type="text" id="zname" name="zname" required placeholder=" ">
      <label for="zname">Nachname*</label>
    </div>

    <div class="input-container">
      <input type="tel" id="phone" name="phone" placeholder=" ">
      <label for="phone">Telefon</label>
    </div>

    <input class="button" type="submit" name="button" id="send" value="senden">
  </form>
</div>

修改后的CSS（关键部分已标注） #

.form {
  display: grid;
}

.input-container {
  position: relative;
  margin-bottom: 1.5rem;
}

.input-container label {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  font-size: 1.1rem;
  transition: all 0.5s ease-in-out;
}

.input-container input {
  border-bottom: 1px solid #555;
  background: var(--background);
  width: 45vw;
  padding: 0.5rem 0 0.2rem 0;
  font-size: 1rem;
  color: var(--text-color);
  text-align: left;
  margin: 0.5rem;
}

/* 关键修改：用:not(:placeholder-shown)替代:valid */
.input-container input:focus~label,
.input-container input:not(:placeholder-shown)~label{
  top: -0.8rem;
  font-size: 0.8rem;
}

input:focus {
  border-radius: 1rem;
  background-color: var(--shadowbox);
  transition: all 0.2s ease-in;
}

.input-container input:active{
  border-radius: 1rem;
  background-color: var(--shadowbox)
}

补充说明 #

• 必须保留placeholder=" "（空格占位符），:placeholder-shown伪类依赖占位符存在，空格占位符不会显示，但能确保伪类正常工作。
• 非必填字段（如phone）现在空值时标签保持原位，输入任意内容后标签上浮并固定；必填字段的交互逻辑不受影响。
• 若后续添加邮箱输入框，只需保持此逻辑，即可实现“输入即上浮”的效果，格式验证可单独通过JS或HTML5的pattern属性实现，不干扰标签浮动。

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