input:focus没生效最常见的原因是CSS优先级被覆盖或浏览器默认样式干扰如Bootstrap用!important锁定边框需用开发者工具检查:focus状态、提升选择器权重、配对设置border属性、禁用outline时补充视觉反馈并注意移动端和IE兼容性问题。input:focus 为什么没生效最常见的原因是 CSS 优先级被覆盖或者 input 元素本身有内联样式或浏览器默认样式干扰。比如某些 UI 框架如 Bootstrap会用 !important 锁定边框样式导致你的 :focus 规则完全不触发。实操建议立即学习“前端免费学习笔记深入”用浏览器开发者工具检查元素确认 :focus 状态是否被识别Elements 面板里勾选 “:focus” 强制触发确保选择器权重足够写成 input[typetext]: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[typetext] 以外的类型或者只在真正获得焦点后才渲染导致触摸后无反馈。 橙篇 百度文库发布的一款综合性AI创作工具