不是加 border-color 就算优化，而是必须让键盘用户一眼锁定操作位置；需清除默认 outline、用 :focus-visible 区分键盘导航、借助 :focus-within 实现容器联动，并验证无障碍对比度≥4.5:1。
直接结论：不是加个 border-color 就算优化，而是必须让键盘用户能一眼锁定当前操作位置——否则表单交互对残障用户就是断链的。
为什么写了 :focus 却看不到效果
最常见原因不是选择器写错，而是浏览器默认 outline 和你自定义样式打架。Chrome/Firefox 会把原生虚线框叠在 box-shadow 或 border 上，导致视觉被遮盖。
- 先加
outline: none或outline: 0清除默认轮廓（但别全局清，只作用于目标元素） - 如果用
border模拟焦点，记得默认就设border: 2px solid transparent，避免聚焦时布局抖动 - 检查是否被父级
pointer-events: none或visibility: hidden阻断了聚焦链
:focus 和 :focus-visible 到底该用哪个
:focus 在任何方式获得焦点时都触发（包括鼠标点击），而 :focus-visible 只在浏览器判定为“键盘导航”时生效——这才是真正面向可访问性的写法。
- 推荐组合：
input:focus { outline: none; }+input:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; } - Safari 15.4+ 才稳定支持
:focus-visible，旧版本需 JS fallback（比如监听keydown是否为 Tab 键） - 别同时写
input:focus和input:focus-visible且样式冲突，后者容易被前者覆盖
表单容器联动高亮要用 :focus-within
单独给每个 input 写 :focus 样式太重复，:focus-within 让整个 .form-group 在任意子控件聚焦时响应，省去 JS 绑定。
立即学习“前端免费学习笔记（深入）”；
- 典型用法：
.form-group:focus-within label { color: #0066cc; }，输入框一聚焦，对应标签立刻变色 - IE 完全不支持，Safari 15.4+ 起稳定；如需兼容老版本，得用
focusin事件监听 - 注意：它不穿透 Shadow DOM，若表单在自定义组件内，样式需写进组件内部
<style>
select 下拉框的 :focus 为什么总失效
原生 select 是操作系统级控件，内部结构（如下拉箭头）无法被 CSS 选中，:focus 只能控制外层边框和阴影等有限样式。
- 可安全调整：
border、box-shadow、background-color（部分浏览器）、padding - 不可靠操作：试图用
::after替换箭头、强制隐藏原生下拉图标（iOS Safari 会忽略） - 真要深度定制？用
<div role="combobox">+tabindex="0"+ 键盘事件模拟，但必须补全 ARIA 属性和焦点管理
最难的不是写出那几行 CSS，而是每次改样式前，都打开 DevTools 的无障碍检查器，验证 outline 对比度是否 ≥ 4.5:1、是否被其他层遮挡、是否在深色模式下依然可见——这些细节没人盯着看，但缺一个，键盘用户就卡在表单第一步。
