原生验证气泡无法真正隐藏，仅能通过非标准伪元素（如::-webkit-validation-bubble）在webkit浏览器中临时压制，firefox不支持，safari行为不一致；彻底移除需禁用原生校验（novalidate+js手动控制），否则将丧失焦点管理、无障碍支持等关键能力。
原生气泡不能真正“隐藏”，只能在部分浏览器中用非标准 CSS 折中压制，且会牺牲用户反馈 —— 这不是功能开关，而是临时遮盖。
Chrome/Safari 里能用 ::-webkit-validation-bubble 吗
可以临时压制，但仅限 WebKit 内核，且属于非标准伪元素：
-
input:invalid::-webkit-validation-bubble和input:invalid::-webkit-validation-bubble-arrow可设display: none - Firefox 完全不支持，Safari（尤其 iOS）可能忽略或行为不一致
- 该伪元素未被 CSS 规范收录，Chrome 未来版本可能移除支持
- 压制后气泡消失，但字段仍保持
:invalid状态，reportValidity()调用也无视觉反馈
为什么不能靠 display: none 或 visibility: hidden 拦住提示
这些样式对气泡本身无效 —— 原生提示由浏览器 UI 层（UA shadow DOM）渲染，不受普通 CSS 选择器控制。但要注意：
- 若给 input 自身设
display: none或visibility: hidden，整个校验会被跳过（浏览器不检查隐藏控件） -
hidden属性不影响校验，但disabled会直接让 required 失效 - 全局 CSS 重置（如
* { pointer-events: none }）可能意外禁用气泡交互
想彻底去掉气泡，唯一可靠路径是绕过原生校验
这不是“隐藏”，而是放弃原生机制，改用 JS 主动控制：
- 给表单加
novalidate，禁用所有原生验证逻辑 - 用
input.addEventListener('invalid', e => e.preventDefault())在气泡弹出前拦截 - 手动调用
checkValidity()+ 自定义 DOM 提示（tooltip、下方文字、aria-live） - 必须同步处理
submit事件，并在失败时聚焦首个错误字段 —— 浏览器不再帮你做这事
真正麻烦的不是气泡藏不住，而是你一旦压制它，就等于主动放弃了浏览器内置的焦点管理、无障碍支持和最小化 JS 依赖 —— 这些细节在移动端和读屏器场景下极易暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
