:focus边框颜色不生效主因是硬编码样式覆盖CSS变量，应统一用border-color: var(--focus-color)并检查computed值；动态换色需JS修改:root变量；禁用outline会破坏可访问性，建议用outline-offset+自定义边框替代。
focus状态边框颜色不生效？检查:focus伪类是否被其他样式覆盖
很多情况下写好 :focus 但边框颜色没变，不是CSS变量没起作用，而是更具体的规则（比如 input:focus { border: 2px solid #007bff; }）直接硬编码了颜色，把变量覆盖掉了。CSS变量只是“值的容器”，它不会自动注入到所有属性里。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保聚焦样式只通过
border-color设置，且依赖变量，例如：input:focus { border-color: var(--focus-color, #007bff); } - 用浏览器开发者工具检查 computed 样式，看最终生效的
border-color值来源——如果显示“rgb(0, 123, 255)”而不是“var(--focus-color)”，说明变量已被计算替换，问题在变量本身未定义或拼写错误 - 避免在同一个选择器里混用硬编码色值和变量，比如
border: 2px solid #000; border-color: var(--focus-color);是危险写法，后者可能被忽略
CSS变量怎么动态换色？用:root定义 + JS修改属性值
单纯在 :root 里设 --focus-color: #007bff; 只是静态值；要实现主题切换或用户偏好响应，得靠JS改这个变量的值——它会实时影响所有引用它的 :focus 样式。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在CSS里统一用
:root { --focus-color: #007bff; }定义初始值 - JS中修改：
document.documentElement.style.setProperty('--focus-color', '#ff6b6b'); - 注意：不要用
document.body.style.setProperty，因为:root对应的是html元素，body下设置的变量作用域有限 - 如果配合暗色模式，可监听
prefers-color-scheme，并在媒体查询里覆盖变量：@media (prefers-color-scheme: dark) { :root { --focus-color: #4ecdc4; } }
为什么加了outline: none后键盘导航失效？别删outline，用outline-offset+自定义边框替代
为“美化”聚焦效果而写 outline: none 是最常见也最危险的操作——它直接砍掉键盘用户的焦点指示，违反可访问性基本要求。浏览器默认 outline 是为了可访问性存在的，不是bug。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 保留 outline，但用
outline-offset: 2px避免与边框重叠，再配合border做视觉强化 - 更稳妥的做法：用
outline: 2px solid var(--focus-color); outline-offset: 2px;，既满足视觉需求，又不破坏键盘导航 - 如果真要完全隐藏 outline（极不推荐），至少提供同等明确的替代聚焦样式，并用
outline: 2px solid transparent;占位，防止布局抖动 - 测试方法：Tab键连续切换，确认每个输入框都有清晰、足够对比度的聚焦反馈
搜索框聚焦动画卡顿？避免在:focus里用box-shadow或渐变过渡
给 :focus 加 transition: all .3s 看似简单，但一旦涉及 box-shadow、背景渐变或 transform，就容易触发重排或高成本重绘，尤其在低端设备上明显卡顿。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只对可硬件加速的属性做过渡：
transition: border-color .2s ease, outline-color .2s ease; - 避免
transition: all—— 它会让所有变化属性都参与过渡，包括你没意识到的height或opacity - 如果必须加阴影，用
transform: scale(1.02)替代宽高变化，它走合成层，性能更好 - 在开发者工具的 Rendering 面板勾选 “Paint flashing”，快速识别哪些区域在聚焦时频繁重绘
变量名拼错、outline误删、过渡属性贪多——这三个点几乎占了搜索框聚焦交互问题的八成。调的时候别急着改JS，先打开DevTools，盯着Computed和Accessibility两个面板看两分钟。
