input:focus不生效主因是边框未显式声明width和style，仅设color无效；须先定义border:1px solid #ccc，再在:focus中改color；推荐用:focus-visible提升无障碍体验。
input:focus 伪类不生效的常见原因
直接写 input:focus { border-color: #007bff; } 却没反应，大概率是原生 border 被重置或覆盖了。浏览器默认 input 有边框，但很多 CSS 重置库（比如 normalize.css）或框架（如 Bootstrap）会把 border 设为 0 或 none，导致 border-color 单独设置无效——颜色变了，但“边框本身不存在”。
- 检查 computed styles：在开发者工具里看
input的border-width是否为0px - 必须显式声明
border-width和border-style，否则border-color不起作用 - 注意 specificity：如果其他规则带
!important或选择器权重更高，:focus会被压制
正确写法：border 必须完整声明
只改颜色不够，得让边框“存在”。最稳妥的方式是统一定义基础边框，再在 :focus 中调整颜色和可选的 shadow。
input {
border: 1px solid #ccc;
outline: none; /* 可选：去掉默认焦点虚线 */
}
<p>input:focus {
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /<em> 增强视觉反馈 </em>/
}这里 border: 1px solid #ccc 是关键——它同时设定了宽度、样式、颜色，后续 border-color 才能被替换。若只写 border-color，而没有先定义 border-style（如 solid），浏览器不会渲染边框。
兼容性与 focus-visible 的现代替代方案
用 :focus 会让键盘和鼠标点击都触发，但有些用户更希望仅键盘导航时才显示高亮（避免鼠标点击后残留焦点环）。这时应考虑 :focus-visible：
立即学习“前端免费学习笔记（深入）”；
金钱与财富知识助手。提供关于金钱的基本概念、理财知识、投资原则、财富思维等方面的内容。适用于：1) 了解金钱的基本知识；2) 学习理财和投资原则；3) 培养财富思维；4) 了解经济学基础概念。
input {
border: 1px solid #ccc;
}
<p>input:focus:not(:focus-visible) {
outline: none;
}</p><p>input:focus-visible {
border-color: #007bff;
outline: none;
}目前 Chrome/Firefox/Edge 均支持 :focus-visible，Safari 15.4+ 也已支持。它比单纯 :focus 更符合无障碍逻辑——鼠标点击不触发，Tab 键切换才高亮。
- 不要用
:focus-visible完全替代:focus，除非你明确接受鼠标点击无视觉反馈 - 搭配
outline: none时务必补上其他视觉提示（如border-color或box-shadow），否则会违反 WCAG 2.4.7 焦点可见性要求
表单控件类型差异：textarea 和 select 也要单独处理
textarea 默认有边框，但 select 在部分浏览器（尤其是 Safari）中对 border-color 支持不稳定，且下拉箭头可能遮挡颜色变化。
-
textarea:focus可以和input:focus共享样式，但建议单独写以确保优先级 -
select推荐加appearance: none并自定义背景箭头，否则边框色可能只在部分区域生效 - 如果用了
border-radius，注意select在旧版 Edge 中圆角会裁剪边框
实际项目中，最好统一用属性选择器批量处理：
input:focus,
textarea:focus,
select:focus {
border-color: #007bff;
}聚焦边框颜色变化看似简单，真正卡住人的地方往往不是语法，而是边框是否“真实存在”、是否被其他规则静默覆盖、以及是否兼顾了键盘用户的可访问性需求。
