CSS :valid伪类在textarea与number输入框中失效问题求助

针对你遇到的textarea和number输入框无法正确触发标签上移/恢复的问题，核心原因是:valid伪类的判断逻辑不符合需求——在未设置required属性时，空的number/textarea元素依然会被判定为valid，导致失去焦点后标签无法恢复原位。

可以通过以下方式修正：

1. 替换:valid为:not(:placeholder-shown)：利用:placeholder-shown伪类判断元素是否为空（需确保目标元素设置了placeholder，哪怕是空白占位符placeholder=" "），这样只有当输入内容后，标签才会保持上移状态。
2. 调整CSS选择器：将原代码中的input:valid ~ label和textarea:valid ~ label替换为对应的:not(:placeholder-shown)选择器。

修正后的CSS代码：

input:focus ~ label, 
input:not(:placeholder-shown) ~ label, 
textarea:focus ~ label, 
textarea:not(:placeholder-shown) ~ label, 
select:focus ~ label, 
select:valid ~ label {
  font-size: 0.75em;
  color: #fff;
  top: -5px;
  -webkit-transition: all 0.225s ease;
  transition: all 0.225s ease;
}

3. 补充占位符设置：为你的number输入框和textarea添加placeholder属性，例如：

<input type="number" placeholder=" ">
<textarea placeholder=" "></textarea>

这样处理后，无论是点击输入框（focus状态）还是输入内容后失去焦点（not(:placeholder-shown)状态），标签都会保持上移缩小的样式；当清空内容并失去焦点时，标签会自动恢复原位，和你正常工作的“名字、姓氏”等字段表现一致。

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