使用CSS伪类:valid和:invalid结合:placeholder-shown可实现无JavaScript的表单验证；通过border颜色变化和伪元素提示反馈输入状态，配合transition提升交互流畅度，适用于轻量级项目。
在 CSS 中实现表单输入验证提示，可以通过结合 HTML5 的表单验证功能和 CSS 伪类来完成。不需要 JavaScript 就能显示简单的错误或成功状态提示，提升用户体验。
HTML5 表单元素在填写不符合规则时会自动标记为无效。CSS 提供了 :valid 和 :invalid 伪类来分别匹配有效和无效的输入状态。
例如，一个必填邮箱输入框：
<input type="email" required placeholder="请输入邮箱">可以这样添加样式：
立即学习“前端免费学习笔记（深入）”；
input:invalid { border: 2px solid #f44336; /* 红色边框表示错误 */ outline: none; }input:valid { border: 2px solid #4CAF50; / 绿色边框表示正确 / }
页面刚加载时，如果输入框为空，也会被识别为 :invalid，导致一开始就显示红框。为了避免这种情况，可以结合 :placeholder-shown 来控制只有在用户输入后才触发样式变化。
input:invalid:not(:placeholder-shown) { border-color: #f44336; }input:valid { border-color: #4CAF50; }
这样，只有当占位符消失（即用户开始输入）后，验证样式才会生效。
CSS 不能直接操作浏览器默认的提示气泡，但可以用伪元素模拟提示文字。
例如，在输入框下方显示错误提示：
input:invalid:not(:placeholder-shown):focus { border-color: #f44336; }input:invalid:not(:placeholder-shown):focus + .hint { opacity: 1; visibility: visible; }
.hint { position: absolute; background: #f44336; color: white; font-size: 14px; padding: 4px 8px; border-radius: 4px; margin-top: 4px; opacity: 0; visibility: hidden; transition: all 0.3s; }
HTML 结构示例：
<div style="position: relative;"> <input type="email" required placeholder="请输入邮箱"> <span class="hint">请输入有效的邮箱地址</span> </div>加入 :focus 判断可以让提示只在用户聚焦输入框并离开后显示。同时使用 transition 让边框颜色和提示出现更自然。
input { padding: 10px; border: 1px solid #ccc; border-radius: 4px; transition: border-color 0.3s; }基本上就这些。通过合理使用 CSS 伪类和结构，可以在不写 JS 的情况下实现简洁直观的表单验证提示。虽然功能有限，但对于轻量级项目已经足够实用。
以上就是在css中实现表单输入验证提示的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
742
收藏
