HTML的summary标签默认聚焦边框太难看怎么用CSS outline去-html教程-PHP中文网

应替换而非删除 summary 的 outline：使用 outline: 2px solid #007bff 和 outline-offset: 2px 配合 border-radius: 4px，并仅在 :focus-visible 下生效；避免 :focus，兼容旧 safari 需 keyboard-focus 类降级；注意 details > summary 选择器优先级及 chrome 120+ 焦点行为变化。

html的summary标签默认聚焦边框太难看怎么用css outline去

summary 标签聚焦时 outline 难看，直接用 outline: none 会出问题

直接给 <summary></summary> 加 outline: none 看似简单，但会破坏可访问性：键盘用户（比如 Tab 导航）将彻底失去焦点指示，违反 WCAG 2.1 标准。浏览器默认 outline 是为了可访问而存在，不是“bug”，而是“保障”。

真正该做的是替换它，而不是删除它：

用 outline: 2px solid #007bff + outline-offset: 2px 控制粗细和离边距离
配合 border-radius: 4px 让轮廓更柔和
只在 :focus-visible 下生效，避免鼠标点击时也出现（现代浏览器支持良好）

为什么不能只写 :focus？

:focus 在所有获得焦点的场景下都触发，包括鼠标点击 <summary></summary> 展开时——这时用户根本没在键盘导航，显示 outline 反而干扰视觉。而 :focus-visible 是专门为此设计的：仅当浏览器判定“用户明显在用键盘操作”时才激活。

实操建议：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

始终优先用 <summary>:focus-visible</summary>，不是 :focus
加 outline: none 到 :focus（非 :focus-visible）来屏蔽鼠标点击触发的 outline
注意 Safari 对 :focus-visible 的支持从 v15.4+ 才稳定，旧版需降级 fallback

兼容旧 Safari 的 fallback 怎么写

如果必须支持 Safari

summary:focus {
  outline: none;
}
summary:focus-visible,
summary[data-focus-visible-added] {
  outline: 2px solid #007bff;
  outline-offset: 2px;
  border-radius: 4px;
}

再配一段极简 JS（仅需 3 行）监听 keydown 并打标记：

document.addEventListener('keydown', () => {
  document.body.classList.add('keyboard-focus');
});
document.addEventListener('mousedown', () => {
  document.body.classList.remove('keyboard-focus');
});
// 然后用 .keyboard-focus summary:focus { outline: none; } 等规则控制

别忘了 details/summary 的 focus 状态继承问题

<details></details> 元素本身也能获得焦点（尤其在 tabindex="0" 时），它的 :focus 会覆盖 <summary></summary> 的样式。如果你发现 outline 总是“不按预期出现”，检查是否误写了 details:focus 规则，或没加足够 specificity。

稳妥写法：