如何在CSS中使用focus-visible突出输入元素颜色

:focus-visible是CSS伪类，根据用户交互方式智能显示焦点样式。键盘导航时高亮输入框边框与阴影，鼠标点击则不显示，提升美观与可用性；通过@supports检测兼容性，确保老旧浏览器正常降级，保持基础功能的同时优化视觉体验。

在CSS中使用 focus-visible 可以智能地为可聚焦元素（如输入框）添加焦点样式，仅在用户通过键盘导航时显示视觉提示，避免鼠标点击时出现不必要的轮廓线。

什么是 focus-visible？

:focus-visible 是一个CSS伪类，浏览器会根据用户的交互方式自动判断是否应用该样式。当用户使用Tab键导航到输入框等表单元素时触发，但用鼠标点击时不激活，提升界面美观与可用性。

基本用法：突出输入元素颜色

你可以结合 :focus 和 :focus-visible 来控制何时显示特定的焦点样式：

input:focus {
  outline: none; /* 移除默认轮廓 */
}
input:focus-visible {
outline: 2px solid #4a90e2;
border-color: #4a90e2;
box-shadow: 0 0 8px rgba(74, 144, 226, 0.5);
}

这样设置后：

• 键盘用户按 Tab 进入输入框时，会看到明显的蓝色边框和阴影，便于识别当前焦点位置
• 鼠标用户点击输入框时，不会显示这些高亮效果，保持界面简洁

兼容性处理建议

虽然现代浏览器普遍支持 :focus-visible，但仍有一些旧版本不兼容。推荐使用 @supports 进行特性检测，确保样式安全降级：

/* 默认只给键盘用户提供视觉反馈 */
input:focus {
  outline: none;
}
@supports (focus-visible: auto) {
input:focus {
outline: none;
}
input:focus-visible {
outline: 2px solid #4a90e2;
border-color: #4a90e2;
box-shadow: 0 0 8px rgba(74, 144, 226, 0.5);
}
}

这种写法确保不支持的浏览器仍能正常显示基础焦点状态，而支持的则享受更智能的行为。

基本上就这些。合理使用 :focus-visible 能在不影响辅助功能的前提下，让页面更干净、体验更自然。