输入框获得焦点时边框不生效，主因是outline覆盖、选择器优先级不足或移动端viewport限制；应重置outline、提高specificity、用:focus-visible兼顾可访问性，并检查user-scalable设置。
输入框获得焦点时边框不生效？检查是否被其他样式覆盖
最常见的原因是 outline 或更早定义的 border 样式优先级更高，或者浏览器默认 outline 被保留干扰了视觉效果。Chrome/Firefox 默认会在 :focus 时加一圈蓝色 outline，它会叠在你自定义的 border 外面，造成“高亮没变”或“双线难看”的错觉。
- 务必显式重置
outline: none（但注意可访问性，见下文） - 确保你的
:focus规则 specificity 足够高，比如写成input:focus而不是泛泛的:focus - 如果用了 CSS 框架（如 Bootstrap），检查其基础表单样式是否设置了
!important边框
用 :focus 设置 border 时颜色/宽度/圆角要协调
单纯加粗边框容易突兀，建议配合过渡动画和视觉一致性设计。重点不是“有没有边框”，而是“用户能否清晰感知状态变化”。
- 推荐使用
border-color变化而非仅加粗，例如从#ccc→#007bff - 添加
transition: border-color 0.2s ease让变化柔和 - 若原边框是
1px solid #ddd，聚焦时可设为2px solid #007bff，同时微调border-radius保持圆角一致
input {
border: 1px solid #ddd;
border-radius: 4px;
transition: border-color 0.2s ease, border-width 0.2s ease;
}
input:focus {
outline: none;
border-color: #007bff;
border-width: 2px;
}
:focus-visible 更安全：只在键盘聚焦时高亮
直接用 :focus 会让鼠标点击后也触发高亮，可能违背用户预期（点一下就变色，但用户并不需要导航提示）。:focus-visible 是现代方案，它只在键盘 Tab 导航等明确需要焦点指示的场景激活。
- 支持情况：Chrome 86+、Firefox 89+、Safari 15.4+，旧版可渐进增强
- 搭配
:focus:not(:focus-visible)可以隐藏鼠标点击后的 outline，保留键盘用户的可访问性 - 避免用
outline: none一刀切，否则会损害屏幕阅读器和键盘用户的体验
input:focus-visible {
outline: none;
border: 2px solid #007bff;
}
/* 鼠标点击时不触发高亮 */
input:focus:not(:focus-visible) {
outline: none;
border-color: #ddd;
}
移动端 focus 样式失效？检查 user-scalable 和 focus 事件触发时机
iOS Safari 和部分安卓 WebView 对 :focus 的触发有特殊限制：比如 input 必须可交互（非 readonly、未禁用）、且页面未禁用缩放（user-scalable=no 会导致 focus 样式不渲染）。
- 确认
<meta name="viewport">中没有user-scalable=no或maximum-scale=1 - 某些安卓浏览器需要给
input添加tabindex="0"才能稳定触发:focus - 真机测试比模拟器更可靠；iOS 上点击软键盘弹出后，焦点样式有时延迟 1 帧才出现
:focus 的高亮逻辑看似简单，但实际要平衡视觉反馈、可访问性、跨端兼容和用户操作意图。最常被忽略的是 :focus-visible 的渐进采用，以及移动端 viewport 设置对伪类渲染的隐性影响。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
