CSS :valid和:placeholder-shown组合实现漂浮标签动画

不能只用:valid或:placeholder-shown单独控制浮动标签，因:valid依赖required等验证属性，无约束时空值也视为valid；:placeholder-shown在用户聚焦或输入空格时立即失效，但标签应保持上浮；两者均无法覆盖“空且聚焦”“非空”“空且未聚焦”全部状态。

核心判断如下：浮动标签的设计模式看似简单，但其CSS实现，尤其是仅依赖:valid或:placeholder-shown，容易出现问题。如果认为“用一个伪类即可解决”，则很可能在特定边界场景下失效。

为何不能单独使用单一伪类控制浮动标签

本质上，:valid伪类跟随表单验证逻辑，而非用户是否输入内容。若input未设置required、type="email"或pattern等校验属性，空值时浏览器仍视为“有效”，:valid持续匹配，标签无法上浮。相反，:placeholder-shown仅在placeholder实际显示时为true。用户点击输入框（聚焦）或输入空格后，placeholder消失，伪类立即失效，但此时标签理应保持上浮。因此，单独使用任一伪类均会遗漏关键状态，导致标签动画错乱。

组合使用：覆盖所有场景的正确方案

既然单独使用均不完美，可采用组合策略。需覆盖以下三种场景：

• 空且聚焦：用户点击输入框但未输入，标签需上浮。
• 非空（无论是否聚焦）：用户输入内容，标签固定在上方。
• 空且未聚焦：页面加载完成或用户离开输入框且未输入，标签沉底。

推荐CSS规则如下：

input:placeholder-shown + label { /* 标签沉底（初始态） */ }
input:focus + label { /* 空且聚焦，标签上浮 */ }
input:valid + label { /* 有内容且通过校验，标签固定上浮 */ }

需特别注意顺序：:placeholder-shown的规则必须放在最后。因为:focus和:valid优先级更高，若不将:placeholder-shown置于末尾，初始状态的沉底效果会被覆盖。此外，:valid在input值为"0"（数字框）或仅输入空格时可能不触发。若需更稳定地判断“非空”，:not(:placeholder-shown)比:valid更可靠。

DOM结构是前提，属性不可缺失

浮动标签并非纯CSS魔法，对HTML结构有硬性要求。常见问题包括：

• label必须紧跟在input之后，且为下一个兄弟元素。唯有如此才能使用+相邻兄弟选择器。若中间插入图标、提示文字或将label置于input之前，所有CSS规则将失效。
• input必须包含placeholder属性，即使写placeholder=""也可。否则:placeholder-shown永不会匹配，组合规则无法生效。
• 若期望:valid发挥作用，则required或pattern等验证属性必不可少。未添加required却依赖:valid判断输入内容，基本不可行。

常见失误还包括通过JS动态设置placeholder，导致:placeholder-shown的生效时机不可控，易引发bug。

兼容性与边界情况：实际挑战所在

:valid和:placeholder-shown的浏览器支持情况需明确：IE完全不支持。Chrome 57+、Firefox 51+、Edge 16+、Safari 15.4+ 可用。但比兼容性更棘手的是边界行为：

• 用户粘贴全角空格、零宽字符或换行符——这些内容对:placeholder-shown而言视为“输入内容”，伪类立即失效。但从业务逻辑看，input的value仍为“空”，导致UI与业务判断错位。
• :valid对type="number"输入"0"的问题：数字0是有效值，:valid会匹配。但多数业务场景下输入0表示有内容，需标签上浮。此时:valid可工作，但若试图用:invalid判断“空”，则无法实现。
• 失焦后状态保持：若字段非必填且无pattern，:valid完全不可靠。此时需fallback到:not(:placeholder-shown)兜底。

从实际开发角度，稳健的做法不是二选一，而是将:not(:placeholder-shown)作为主力，:valid仅作为补充校验层。CSS层面无法执行trim或正则匹配，能依赖的只有浏览器渲染placeholder的时机。