HTML中summary焦点样式 HTML中summary标签:focus伪类美化-html教程-PHP中文网

summary:focus 样式需先加 tabindex="0" 才生效，因其非原生可聚焦元素；应配 outline 或等效视觉反馈，慎用 outline: none；:focus-visible 需降级为 :focus 兜底；移动端建议结合 js .focus() 或 :active 保障触摸反馈。

html中summary焦点样式 html中summary标签:focus伪类美化

summary 默认不响应 :focus，必须加 tabindex

直接写 summary:focus 样式不会生效，因为 <summary></summary> 不是原生可聚焦元素——它不像 <input> 或 <button></button> 那样默认支持键盘 Tab 导航或 .focus() 调用。浏览器会忽略该伪类匹配，无论 CSS 写得多完整。

✅ 正确做法是显式赋予其焦点能力：给 <summary></summary> 添加 tabindex="0"（注意：不是加在 <details></details> 上，虽然也行，但语义和行为更准的是加在 <summary></summary> 本身）。

tabindex="0" 让元素按 DOM 顺序参与键盘导航，且能被 .focus() 触发
不推荐 tabindex="-1"：它只支持 JS 主动聚焦，无法通过 Tab 键到达，对可访问性不友好
避免重复加 tabindex：如果 <summary></summary> 已在 <details></details> 内部，再给 <details></details> 加 tabindex 会造成两个可聚焦节点，Tab 两次才能跳过一个折叠块

:focus 样式要配 outline 或替代视觉反馈

加了 tabindex="0" 后，summary:focus 就能触发了，但别急着删 outline——移除默认 outline 后若不提供等效视觉提示，键盘用户将完全无法判断当前聚焦位置。

常见错误是只写 outline: none，然后忘了补其他样式。正确节奏是：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

先保留或微调 outline：比如 outline: 2px solid #007aff; outline-offset: 2px;
或改用 box-shadow + background-color 组合，更可控（尤其圆角 summary）
若 summary 内含图标（如 ▶ / ▼），可同步旋转或变色增强反馈，例如：summary:focus .icon { transform: rotate(90deg); }
慎用 border：summary 默认 display 是 list-item，加 border 可能破坏内联布局，优先用 outline 或 padding+shadow

不要忽略 :focus-visible 的兼容性取舍

想让鼠标点击时不显示焦点环、仅键盘 Tab 时才高亮？summary:focus-visible 理论上可行，但实际要注意：

Chrome / Edge 100+ 和 Firefox 106+ 支持良好；Safari 直到 16.4 才开始部分支持，iOS Safari 16.5+ 才稳定
不能单独依赖 :focus-visible：老浏览器会直接忽略，导致无任何焦点样式。必须搭配降级方案：summary:focus 作为兜底
示例写法：
```
summary:focus {
  outline: 2px solid #007aff;
}
summary:focus-visible {
  outline: 2px solid #34C759;
}
```
——这样键盘用户看到绿色环，鼠标用户看到蓝色环（或统一处理）
别在 summary 上滥用 outline: none：一旦写了，又没配 :focus-visible 或 :focus，就等于主动放弃可访问性