请问代码中哪部分实现了表单输入框的外部高亮效果？

架构老林

2026-8-17

问题解答

一、哪段CSS实现了输入框聚焦高亮？

你要找的是针对表单元素聚焦状态的CSS规则，最常见的是通过:focus伪类配合以下两类属性实现：

outline + outline-offset：这是实现外部高亮最直接的方式，示例代码：

input:focus {
  outline: 2px solid #2196F3; /* 自定义高亮颜色 */
  outline-offset: 2px; /* 控制高亮与输入框的间距 */
}

box-shadow：用阴影模拟外部高亮，支持半透明效果，灵活性更高，示例代码：

input:focus {
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.3);
}

因为你移除body大部分代码后效果仍存在，说明这段CSS是全局生效的（比如直接写在input:focus或全局:focus选择器下），你可以在CSS代码里搜索:focus关键词，找到包含outline或box-shadow的规则，就是实现高亮的核心代码。

二、更优的实现方式

用:focus-visible提升可访问性
:focus会在鼠标点击和键盘导航时都触发高亮，而:focus-visible仅在键盘导航（比如Tab键切换）时显示高亮，既避免鼠标点击时的不必要视觉干扰，又能保障键盘用户的操作感知：

input:focus-visible {
  outline: none; /* 清除浏览器默认outline */
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.4);
  transition: box-shadow 0.2s ease; /* 添加平滑过渡动画 */
}

统一所有表单控件的高亮样式
如果你的表单包含输入框、文本域、下拉框等多种控件，给它们统一设置聚焦样式，保持视觉一致性：

/* 先设置表单控件基础样式 */
input, textarea, select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: all 0.2s ease;
}

/* 统一聚焦状态样式 */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  border-color: #2196F3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.3);
  outline: none;
}