css 想在焦点输入框显示边框高亮怎么办_使用 :focus 伪类设置边框样式

输入框获得焦点时边框不生效，主因是outline覆盖、选择器优先级不足或移动端viewport限制；应重置outline、提高specificity、用:focus-visible兼顾可访问性，并检查user-scalable设置。

css 想在焦点输入框显示边框高亮怎么办_使用 :focus 伪类设置边框样式第1张

输入框获得焦点时边框不生效？检查是否被其他样式覆盖

最常见的原因是 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;
}