可通过禁用默认气泡+自定义dom+伪类控制实现可定制错误提示；推荐使用input:invalid:user-invalid:focus精准触发样式，监听invalid事件阻止默认行为并动态渲染提示文案，配合css美化与js逻辑控制显示隐藏。
不能直接用 CSS 修改浏览器原生的气泡提示框样式，但可以通过禁用默认提示 + 自定义 DOM 元素 + 伪类控制状态，实现完全可定制的错误提示外观。
用 :user-invalid 伪类精准控制输入框样式
仅用 :invalid 会在页面加载时就把空的必填项标红，体验差。应搭配 :user-invalid 使用，它只在用户操作过且验证失败后才生效：
-
input:invalid:user-invalid—— 适用于 text、email、url 等自动触发校验的控件 -
select:invalid:user-invalid—— select 默认不响应 :invalid，需配合 JS 手动添加.error类 - 推荐组合写法：
input:invalid:user-invalid:focus，聚焦时加红框+图标，更聚焦用户当前操作
隐藏原生气泡，接管提示文案渲染
浏览器默认的红色气泡无法用 CSS 调整，必须拦截并重定向到自定义区域：
- 监听表单或 input 的
invalid事件，调用e.preventDefault()阻止气泡弹出 - 读取
input.validationMessage获取当前错误文案 - 把文案插入到对应 input 下方的
<div class="error-tip"></div>中 - 提交时可批量遍历
form.querySelectorAll(':invalid')，统一收集所有错误并集中展示
用 CSS 定义自定义提示框视觉效果
给提示容器（如 .error-tip）设置清晰、柔和的样式，兼顾可读性与一致性：
- 背景用浅红
#fee，文字用深红#c30，边框用稍深的#ebb - 加
border-radius: 4px和padding: 6px 10px，避免生硬直角 - 添加淡入动画：
animation: fadeIn 0.3s ease-in，提升反馈自然感 - 用绝对定位让提示紧贴输入框底部，避免布局跳动
配合 JavaScript 动态控制显示逻辑
提示不能一直挂着，要随用户操作即时更新：
- 在
blur事件中检查input.checkValidity()，失败则显示对应提示 - 在
input或keyup事件中，一旦输入合法，立即清空提示并移除.error类 - 提交时先
e.preventDefault()，再手动校验；全部通过才放行，否则高亮首个错误项并滚动到它 - 对
disabled或带novalidate的表单，reportValidity()会静默失效，需提前判断规避
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
