如何去掉 input focus 时候的蓝色光晕

1. 去掉 input focus 时候的蓝色光晕

在网页设计中，默认情况下，当用户点击一个输入框（input）或者表单元素时，为了提高可访问性，浏览器通常会给这些元素添加一个蓝色的轮廓（focus ring），这样可以帮助视力不佳的用户或是使用键盘导航的用户更清晰地看到当前焦点所在的位置。

然而，有时候设计师可能会觉得这个蓝色轮廓影响了网站的美观，想要移除它。尽管移除焦点轮廓可能会影响网站的无障碍访问性，但如果你确实需要这样做，请确保提供其他方式来弥补这一变化，比如使用不同颜色或边框样式来表示焦点状态。

以下是一个CSS示例，展示了如何移除输入框获得焦点时的轮廓：

input, button, textarea, select {
    outline: none; /* 或者使用 outline: 0; */
}

或者，如果你想只针对特定的输入类型移除轮廓，你可以这样做：

input[type="text"], input[type="email"] {
    outline: none;
}

请注意，完全移除焦点轮廓可能不利于网站的无障碍访问，特别是对于那些依赖视觉反馈来确定页面上活动元素的用户。如果决定移除默认的轮廓，请确保替代方案同样能够提供足够的可见性。例如，可以使用稍微不同的背景色或边框样式来代替：

input:focus, button:focus, textarea:focus, select:focus {
    border-color: #aaa;
    background-color: #f0f0f0;
}

这将改变输入框获得焦点时的边框颜色以及背景颜色，从而保持一定的可见性同时又不会显得突兀。