原生校验气泡不可跨浏览器统一美化，因其属浏览器ui层不可控组件；可行方案为禁用后自定义提示，或保留原生机制仅优化输入框视觉反馈。
原生校验气泡不是“样式问题”，而是浏览器 UI 层的不可控组件——它没有统一规范，不能真正自定义，更无法跨浏览器一致呈现。想靠 CSS 统一美化，注定失败。
别试图改气泡，先决定要不要它
Chrome、Firefox、Safari 对 required 或 type="email" 触发的提示，实现机制完全不同：
- Chrome / Edge（Blink）：弹出带箭头的白色气泡，位置靠近输入框右下
- Firefox（Gecko）：不支持任何伪元素控制，气泡固定、不可样式化
- iOS Safari：不弹气泡，改在软键盘上方显示横幅式红字，且自动聚焦
这些差异不是 bug，是各引擎对“用户反馈”的不同设计选择。强行用 ::-webkit-validation-bubble 压制，只在旧版 Chrome 有效，现代 Chrome 29+ 已禁用大部分样式控制能力，Safari 更常忽略或错位。
真正可行的两条路径
路径一：彻底禁用，接管全部逻辑
- 给
<form></form>加novalidate属性（必须写在 form 上，input 上无效） - 用
input.addEventListener('invalid', e => e.preventDefault())拦截气泡触发前一刻 - 手动调用
checkValidity()，结合setCustomValidity('')清空状态 - 用 DOM 插入自定义提示（如
<div class="tip">邮箱格式错误</div>），配合aria-live="polite"保障读屏器可读
路径二：保留原生机制，只优化视觉反馈
- 不隐藏气泡，但用 CSS 强化输入框自身状态：比如
input:invalid:not(:placeholder-shown) { border-color: #d45252; } - 添加背景图标提示：
input:required:invalid { background-image: url('error-icon.svg'); } - 用
oninvalid="this.setCustomValidity('')"防止重复弹窗，再配合 JS 实时校验并展示自定义文字提示（下方小字）
哪些“技巧”其实危险或已失效
display: none 或 visibility: hidden 对气泡本身完全无效——它不在普通 DOM 流中，而是 UA shadow DOM 渲染；
* { pointer-events: none } 可能意外禁用整个表单交互；
在 submit 事件里 preventDefault() 挡不住气泡——因为校验发生在 submit 触发之前，浏览器早把流程卡死了；
依赖 title 属性做提示？移动端多数不响应，且无样式、无图标、无障碍支持弱，仅适合内部调试。
本质上，这不是样式兼容问题，而是交互模型的选择问题。要一致性，就得放弃原生气泡；要无障碍和低维护成本，就该接受它的存在，并围绕它设计体验。
