无required无占位符时，如何检测输入框填充并实现标签动画？

现有两个输入框，其中一个带required属性，当前CSS仅实现了输入框:focus时的标签动画。需求是输入框聚焦或填充内容时都触发标签动画，但:valid伪类只对带required的输入框生效，又没法用:placeholder-shown伪类（原代码占位符为空字符串），要求不借助JavaScript实现。

原HTML代码：

<div class="form-item-input">
  <input
    type="text"
    name="mail"
    id="mail"
    placeholder=""
    required>
  <label for="mail">Email</label>
</div>

<div class="form-item-input">
  <input
    type="text"
    name="name"
    id="name"
    placeholder="">
  <label for="name">Name</label>
</div>

原CSS代码：

.input {
  & label {
    position: absolute;
    left: 3px;
    top: 7px;
    color: #959595;
    font-size: 18px;
    transition: all ease .2s;
  }

  &:focus {
    & ~ label {
      top: -16px;
      left: 0;
      font-size: 15px;
    }
  }
}

核心思路是给输入框设置透明占位符（单个空格），让:placeholder-shown伪类能正常工作，再结合:focus状态，即可同时覆盖聚焦和已填充内容的场景，适配所有输入框。

修改后的HTML #

<div class="form-item-input">
  <input
    type="text"
    name="mail"
    id="mail"
    placeholder=" "
    required>
  <label for="mail">Email</label>
</div>

<div class="form-item-input">
  <input
    type="text"
    name="name"
    id="name"
    placeholder=" ">
  <label for="name">Name</label>
</div>

注意：占位符为单个空格" "，而非空字符串

修改后的CSS #

.form-item-input {
  position: relative; /* 让标签绝对定位基于容器 */
  margin: 20px 0;
}

.form-item-input input {
  padding: 8px 3px;
  font-size: 18px;
  border: 1px solid #ccc;
  outline: none;
  background: transparent;
}

.form-item-input label {
  position: absolute;
  left: 3px;
  top: 7px;
  color: #959595;
  font-size: 18px;
  transition: all ease .2s;
  pointer-events: none; /* 防止标签干扰输入框点击 */
}

/* 聚焦或输入框有内容时，触发标签动画 */
.form-item-input input:focus ~ label,
.form-item-input input:not(:placeholder-shown) ~ label {
  top: -16px;
  left: 0;
  font-size: 15px;
  color: #333; /* 可选：填充后标签加深颜色 */
}

原理说明 #

1. 空格占位符让:placeholder-shown伪类生效：输入框为空且未聚焦时，占位符显示；输入框有内容或聚焦时，占位符隐藏，not(:placeholder-shown)触发。
2. 结合:focus和not(:placeholder-shown)选择器，覆盖聚焦和已填充内容两种触发场景，无论输入框是否带required属性都能正常工作。
3. 父容器设position: relative，确保标签定位准确；标签加pointer-events: none，避免点击标签时影响输入框获焦。

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