CSS设置焦点颜色技巧

本文详解了如何通过CSS的:focus伪类精准控制网页元素（如输入框、按钮）在获得焦点时的视觉反馈，涵盖使用outline属性快速修改轮廓颜色与样式、移除默认轮廓后借助border或box-shadow实现更美观的聚焦效果，并特别强调在追求设计感的同时必须保障键盘用户的可访问性——通过清晰可见的边框变色、阴影增强或背景微调等方式，确保焦点状态始终显著易辨，真正实现美观性与可用性的平衡统一。

当元素获得焦点时，比如输入框被点击或通过Tab键选中，浏览器默认会显示一个轮廓（outline）来提示用户。你可以通过CSS的 :focus 伪类来自定义这个焦点状态的样式，包括颜色、轮廓、阴影等。

使用 outline 改变焦点轮廓颜色

最常见的方式是修改 outline 属性，控制焦点边框的颜色和样式：

input:focus {
  outline: 2px solid blue;
}

你也可以只改变颜色，保留默认粗细和样式：

input:focus {
  outline-color: red;
}

移除默认轮廓并使用 border 或 box-shadow

有时默认 outline 样式不够美观，可以先清除它，再用 border 或 box-shadow 实现更精致的效果：

input:focus {
  outline: none;
  border: 2px solid green;
}

或者用阴影增强视觉效果：

input:focus {
  outline: none;
  box-shadow: 0 0 5px 2px rgba(0, 123, 255, 0.5);
}

确保可访问性

虽然可以移除 outline，但强烈建议为键盘用户保留明显的焦点指示，避免影响无障碍访问。如果隐藏了 outline，一定要提供其他清晰的聚焦反馈，比如：

• 改变边框颜色
• 添加内阴影或外阴影
• 背景色微调

button:focus {
  outline: none;
  background-color: #e0f7fa;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

终于介绍完啦！小伙伴们，这篇关于《CSS设置焦点颜色技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！