输入框:focus边框不生效，主因是outline覆盖、border缺少style/width、CSS优先级冲突或深色模式限制；需设outline:none、完整border属性、检查Computed值并适配多端。
输入框获得焦点时边框不生效？检查是否被其他样式覆盖
直接写 :focus 但没反应，大概率是 CSS 优先级或层叠顺序问题。浏览器默认的 input 样式（尤其是某些 Chrome 版本）会用 outline 而非 border 响应焦点，导致你改了 border 却看不到变化。
- 先加
outline: none清除默认外轮廓，否则它可能压在你的border上面 - 确保选择器足够具体，比如用
input[type="text"]:focus比单纯input:focus更不容易被重置 - 如果用了 CSS 预处理器或框架（如 Bootstrap），查一下是否有全局
:focus规则做了重定义
只改边框颜色不够，记得同步调整 border-width 和 border-style
border 是复合属性，仅设 border-color 不会触发视觉变化——前提是原来没设过 border-style（比如 solid）或 border-width（比如 1px）。很多开发者卡在这一步。
input {
border: 1px solid #ccc; /* 必须有 style + width 才能显色 */
background-color: #fff;
}
<p>input:focus {
border-color: #007bff;
background-color: #f8f9fa;
outline: none;
}- 避免只写
border-color: #007bff—— 若原始border是none或0，颜色再换也看不见 - 若想让聚焦时边框“变粗”，可同时改
border-width，但注意这会轻微影响布局（可配合box-sizing: border-box抵消） - 不要依赖
transition却忘了加border初始值——过渡动画需要起始和结束状态都存在可动画属性
背景色变化在深色模式下可能失效，需考虑 prefers-color-scheme
现代系统开启深色模式后，background-color 可能被浏览器强制覆盖（尤其在表单控件上），单纯写 background-color: #f0f0f0 在 macOS Safari 或新版 Edge 中可能无效。
- 加
!important是最直接的临时解法（不推荐长期用），或改用background复合属性并确保无其他background声明干扰 - 更健壮的做法是检测系统偏好：
@media (prefers-color-scheme: dark) { input:focus { background-color: #333 !important; border-color: #007bff; } } - 注意：部分浏览器对
input的background有渲染限制，若仍不生效，可尝试包裹一层div并把焦点样式移到父容器上
移动端 focus 样式常被忽略，因为虚拟键盘弹出会触发两次 focus/blur
iOS Safari 和部分安卓浏览器中，点击输入框后会快速触发 focus → blur → focus，导致样式闪动或未稳定应用。这不是 bug，而是输入法切换的正常行为。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
:focus做关键交互反馈（比如显示提示文字），改用 JavaScript 监听focusin事件更可靠 - 若坚持用纯 CSS，可加
transition: background-color 0.2s, border-color 0.2s缓冲抖动 - Android WebView 中，有时需加
-webkit-appearance: none才能让自定义样式完全生效
真实项目里，:focus 看似简单，但跨浏览器、跨设备、跨主题的一致性，往往卡在默认样式残留、优先级冲突和平台特异性行为上。动手前先用浏览器 DevTools 的 “Computed” 面板看实际生效的 border 和 background-color 值，比猜更省时间。
