浏览器原生 required 提示框无法通过 CSS 定制，因其由 UA 渲染、不进入 DOM 流；必须用 JavaScript 禁用原生提示、手动校验并渲染自定义 DOM 提示容器。
改不了。浏览器原生的 required 提示框（比如 Chrome 的灰色气泡、Firefox 的顶部横幅）是 UA（用户代理）控制的 UI，不暴露 DOM 节点，也不支持任何 CSS 选择器——validationMessage 气泡本身无法被 style 或 class 触达。
为什么直接写 .tooltip { color: red } 不生效
因为那个提示框根本不是你页面里的 HTML 元素。它由浏览器底层渲染，不进入 document 流，也不响应 CSS 作用域。你查不到它的标签名，也加不了 id 或 class。所有试图用 ::-webkit-validation-bubble 或类似伪元素 hack 的方案，在现代浏览器中早已失效或从未标准化。
想统一控制提示样式，必须用 JavaScript 接管
核心路径是：禁用原生提示 → 手动触发校验 → 自己渲染 DOM 提示。
- 在
submit事件里调e.preventDefault()，阻止默认弹窗 - 用
input.checkValidity()主动检测，再读input.validationMessage获取文案（或自己写） - 把提示文字塞进一个你可控的
<div id="error-message"></div>，然后用 CSS 定制它的颜色、字体、位置、动画 - 如果要保留
required的语义和基础行为，可继续保留该属性，但需初始化input.setCustomValidity('')，否则和原生逻辑冲突
别踩这些坑
常见误操作：
立即学习“前端免费学习笔记（深入）”；
- 给
input直接写::after { content: "⚠" }——input是替换元素，不支持伪元素插入内容 - 只靠
:invalid改边框，却没加:not(:placeholder-shown)—— 页面一加载所有必填框就变红，体验极差 - 用了
setCustomValidity('xxx')却忘了在用户输入后立刻调setCustomValidity('')清空，导致错误状态卡死 - 在移动端（尤其旧版 iOS Safari）依赖
required原生校验，结果checkValidity()返回true却实际没校验，必须 JS 降级兜底
真正能定制的，只有你自己写的提示容器；原生气泡永远是黑盒。这个边界得认清楚，不然会浪费大量时间调试不存在的 CSS 规则。
