浏览器为原生 html 元素（如 ``）提供的默认悬停、聚焦等交互样式，确实基于 `:hover`、`:focus` 等标准 css 伪类，由各浏览器内置的用户代理样式表（user agent stylesheet）定义，而非 javascript 或 shadow dom 渲染逻辑。

这些默认样式并非“魔法”，而是可查、可覆盖、符合规范的 CSS 实现。例如，Chrome 和 Firefox 的用户代理样式表中， 的典型默认规则如下：

input[type="text"]:hover {
  border-color: #c4c4c4; /* 略深的边框色（具体值因版本而异） */
}

input[type="text"]:focus {
  outline: 1px solid -webkit-focus-ring-color;
  outline-offset: 2px;
}

⚠️ 注意：

Asksia

Asksia AI – 最好的AI老师，可靠的作业助手

下载

• :focus 样式中的 outline 是可访问性关键属性，移除时务必用 outline: none + 自定义 box-shadow 或 border 替代，以保障键盘导航可用性；
• 不同浏览器的 UA 样式存在细微差异（如 Safari 对 :focus-visible 更激进，Firefox 默认禁用 outline 在鼠标点击时的显示），因此跨浏览器一致性需主动归一化（常借助 * { outline: none; } 配合 :focus-visible 精准控制）；
• 虽然部分现代控件（如 、）内部使用 Shadow DOM 封装样式，但其公开的交互状态（如 :hover/:focus）仍通过标准伪类暴露并响应，开发者无需穿透 Shadow DOM 即可样式化。

✅ 总结：浏览器默认交互样式是纯 CSS 驱动的，根植于公开的 UA Stylesheet，遵循 W3C 规范。理解这一点，有助于你合理重置（reset）、增强（enhance）或无障碍优化（a11y-optimize）表单控件行为，而非误以为其依赖黑盒机制。

https://www.php.cn/faq/2021917.html