如何使用Tailwind CSS的Peer功能实现纯CSS的表单验证提示？-css教程-PHP中文网

peer选择器需input与提示元素同父且提示在后，依赖peer类标记及peer-*前缀工具类生效；:invalid需验证属性和用户交互，:user-invalid更可靠；失焦显示需peer-focus-within配合父容器；动画失效常因height:auto或display:none，应改用max-height或opacity。

如何使用tailwind css的peer功能实现纯css的表单验证提示？

Peer选择器怎么匹配表单元素和对应提示？

Peer功能依赖兄弟节点关系，必须让 <input> 和提示元素（如 <span></span>）处于同一父容器内，且提示元素在 input 后面——否则 peer 类不会生效。Tailwind 的 peer 是一个占位类，本身不产生样式，只用于标记目标元素；真正起作用的是后续带 peer-*: 前缀的工具类。

常见错误是把提示文字放在 <label></label> 里或隔了 wrapper div，导致 peer-invalid:opacity-100 完全没反应。正确结构示例：

<div class="relative">
  <input type="email" required class="peer border px-3 py-2"><span class="peer-invalid:opacity-100 opacity-0 text-red-500 text-sm">邮箱格式不正确</span>
</div>

为什么 :invalid 不触发，但 :required 也没用？

浏览器原生表单验证状态（如 :invalid、:valid、:focus-within）只对具有验证能力的 input 生效，且需满足两个条件：一是有 required 或其他验证属性（如 type="email"、pattern），二是用户已与该字段交互过（blur 或 submit 后）。刚加载页面时，空的 required input 默认是 :invalid，但部分浏览器（尤其是 Safari）会延迟应用该状态，导致初始提示不显示。

解决办法：加 novalidate 到 form 并改用 :user-invalid ——它比 :invalid 更可靠，只要输入值违反约束就立即生效
:required 只表示字段有 required 属性，不反映验证结果，不能用来控制提示显隐
若用自定义验证（比如 JS 调用 setCustomValidity()），需手动 toggle data-invalid 并配合 peer-data-[invalid]:opacity-100

如何让提示文字在 input 失焦后才出现？

纯 CSS 无法监听 “第一次失焦”，但可以用 :focus-within + 状态标记组合模拟。关键是把父容器设为 focus-within 目标，再结合 input 的验证状态：

纯css无限循环渐变曲线动画效果

纯css无限循环渐变曲线动画效果，该特效很适合网页制作，无限循环的动画效果。

下载

<div class="relative peer-focus-within:opacity-100 opacity-0 transition-opacity">
  <input type="password" required class="peer"><span class="peer-invalid:opacity-100 opacity-0">密码不能为空</span>
</div>

这里有两个关键点：

peer-focus-within 必须作用于 input 的父容器（不是 input 自身），且该容器需包含 input 和提示元素
提示的显隐由两层控制：父容器的 peer-focus-within:opacity-100（表示用户进过这个区域），叠加 input 的 peer-invalid:opacity-100（表示当前无效）
不要依赖 :blur —— CSS 没有这个伪类

Peer配合transition时为什么动画卡顿或失效？

Peer 触发的样式变更（如 opacity、scale、height）若未声明 transition，默认无动画；但即使写了 transition，也可能因重排/重绘触发失败。最常踩的坑是：对 height: 0 → height: auto 做 transition，CSS 不支持 auto 动画。

正确做法：用 max-height 替代 height，例如 max-h-0 overflow-hidden + peer-invalid:max-h-10
避免在 peer-*: 中使用 display: none —— transition 对 display 无效，应改用 opacity + pointer-events-none
若提示需要从上滑入，可用 transform: translateY(-10px) → translateY(0)，比 top/bottom 更高效