输入框聚焦高亮边框需用:focus伪类，推荐预设border宽度并修改color、禁用outline；或美化outline加offset；配合transition实现平滑动画，并兼顾可访问性。

输入框聚焦时高亮边框，核心是用 :focus 伪类配合 outline 或 border 属性实现。默认浏览器会加 outline（常为蓝色虚线），但通常我们想自定义成更协调的实色边框。

用 border 替换默认 outline

直接修改 border 最直观，且不影响布局（前提是原 border 已设固定宽度）：

input:focus {
  border-color: #007bff; /* 高亮主色 */
  border-width: 2px;     /* 确保宽度一致，避免抖动 */
  outline: none;         /* 移除默认 outline，防止叠加 */
}

⚠️ 注意：如果原 border-width 未声明，聚焦时突然加粗会导致页面轻微重排。建议初始状态就设好边框宽度，例如：

• input { border: 2px solid #ddd; }
• input:focus { border-color: #007bff; outline: none; }

保留 outline 但美化它

若不想改动 border，可用 outline 单独控制聚焦轮廓（不占布局空间）：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

input:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px; /* 轮廓离边框的距离，更清晰 */
}

这样既保持原有边框不变，又能添加一层醒目的高亮环。

加过渡动画让效果更自然

聚焦/失焦时加 transition 可避免突兀切换：

input {
  border: 2px solid #ddd;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
<p>input:focus {
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2); /<em> 额外柔光效果 </em>/
outline: none;
}</p>

常见组合：边框变色 + 微弱阴影，视觉层次更丰富。

兼容性与可访问性提醒

移除 outline 时务必提供足够对比的替代样式，否则影响键盘用户操作：

• 别只依赖颜色变化，可叠加 box-shadow 或 background-color
• 确保聚焦态在深色/浅色模式下都清晰可见
• 测试 Tab 键导航是否能明确看到当前焦点位置

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！