如何利用HTML自定义表单焦点边框_通过CSS outline:none与box-shadow-html教程-PHP中文网

直接设置 outline: none 会破坏键盘用户的焦点指示，违反 wcag 可访问性要求；应优先使用 :focus-visible 配合 box-shadow 实现可控焦点样式，并为旧浏览器提供降级方案。

如何利用html自定义表单焦点边框_通过css outline:none与box-shadow

focus 状态下 outline:none 导致可访问性问题

直接给 input 或 button 加 outline: none 会移除键盘聚焦时的默认高亮边框，看似“更美观”，但实际破坏了屏幕阅读器和键盘用户的导航路径。WCAG 明确要求所有可聚焦元素必须提供清晰的焦点指示。

真正该做的是：保留焦点可见性，但用更可控的方式重绘它。

永远不要无条件写 outline: none —— 至少配合 :focus-visible 条件使用
优先用 outline: 2px solid transparent 占位，再通过 box-shadow 实现视觉边框
避免仅靠颜色变化表示 focus（色觉障碍用户可能无法识别）

:focus-visible 是关键开关

:focus-visible 是现代浏览器（Chrome 86+、Firefox 89+、Safari 15.4+）支持的伪类，它只在用户**通过键盘触发 focus** 时生效，鼠标点击或触摸则不匹配。这让你能安全地隐藏鼠标用户的 outline，同时保留键盘用户的焦点提示。

典型写法：

input:focus {
  outline: none;
}
input:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

或者更进一步，用 box-shadow 替代 outline：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 191, 0.25);
}

box-shadow 模拟边框要注意的细节

box-shadow 做焦点边框比 outline 更灵活，但容易忽略渲染层级和尺寸控制。

必须设 outline: none，否则 outline 和 box-shadow 叠加导致视觉混乱
用 inset 还是外阴影？外阴影（如 0 0 0 2px #007bff）更接近原生 outline 行为；inset 适合内凹效果，但需注意 padding 冲突
阴影扩散值（第四个长度参数）决定“边框粗细”，建议 2–4px；模糊值（第三个）建议为 0，否则边缘发虚，降低可辨识度
记得加 outline-offset（如 outline-offset: 2px）来预留间隙，避免与 border 贴死

兼容旧浏览器的降级方案

IE 和老版 Safari 不支持 :focus-visible，若需支持，可用 JavaScript 检测键盘 focus 并加 class，但更轻量的做法是保守降级：

input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 191, 0.25);
}
/* 在不支持 :focus-visible 的环境里，对所有 focus 统一处理 */
@supports not selector(:focus-visible) {
  input:focus {
    box-shadow: 0 0 0 3px rgba(0, 123, 191, 0.25);
  }
}

这种写法既保持现代浏览器的精准控制，又让旧环境有基本焦点反馈。真正难处理的是需要精确区分鼠标/键盘行为的复杂表单，这时候得引入 keyboard-focus 类或监听 keydown 事件。

别为了“去掉那个难看的虚线”而牺牲整个键盘导航链路——那条虚线不是 bug，是接口契约的一部分。