input:focus没生效最常见的原因是CSS优先级被覆盖或浏览器默认样式干扰，如Bootstrap用!important锁定边框；需用开发者工具检查:focus状态、提升选择器权重、配对设置border属性、禁用outline时补充视觉反馈，并注意移动端和IE兼容性问题。
input:focus 为什么没生效
最常见的原因是 CSS 优先级被覆盖，或者 input 元素本身有内联样式或浏览器默认样式干扰。比如某些 UI 框架（如 Bootstrap）会用 !important 锁定边框样式，导致你的 :focus 规则完全不触发。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查元素，确认
:focus状态是否被识别（Elements 面板里勾选 “:focus” 强制触发） - 确保选择器权重足够：写成
input[type="text"]:focus比单纯input:focus更容易压过框架默认规则 - 显式重置边框：必须同时设置
border-color和outline，否则可能只变色但还留着默认蓝色外框
如何正确写 focus 边框样式
直接改 border-color 是最干净的做法，但要注意它依赖于原始 border 是否已定义。如果没设过 border，改 border-color 无效——因为边框宽度是 0，颜色再变也看不见。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终配对设置：
border: 2px solid #ccc;+border-color: #007bff;，而不是只写后者 - 禁用默认焦点环：加
outline: none;，但务必搭配其他视觉反馈（比如阴影或背景色），否则可访问性受损 - 推荐写法示例：
input:focus { border-color: #007bff; outline: none; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); }
focus 样式在移动端失效怎么办
iOS Safari 和部分安卓浏览器默认禁用非可点击元素的 :focus（尤其是 input[type="text"] 以外的类型），或者只在真正获得焦点后才渲染，导致触摸后无反馈。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
input加tabindex="0"强制支持焦点状态（尤其对自定义组件） - 避免仅靠
:focus做交互反馈；配合:active或 JavaScript 的focusin事件做兜底 - 真机测试时注意：Safari 可能延迟渲染，加
transition: border-color 0.15s;能让变化更明显
兼容老版本 IE 的 focus 写法
IE8 及以下不支持 :focus 伪类（除非用 JS 模拟），而 IE9+ 支持但对 input[type="number"] 等新类型支持不稳定。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 如果必须兼容 IE8，用 class 切换代替伪类：
input.js-focus，配合onfocus/onblur事件控制 - IE9 中
input[type="search"]的:focus可能不触发，建议统一用属性选择器限定类型 - 不要依赖
:focus-within—— 它在 IE 完全不可用，且 Edge 16+ 才开始支持
真正难的不是写对那几行 CSS，而是得时刻想着：这个样式会不会被 reset.css 覆盖？用户是点触还是键盘导航？有没有人用屏幕阅读器？这些细节一漏，:focus 就从交互提示变成隐藏 bug。
