摆脱浏览器显示的 HTML 表单元素中的轮廓？答案

【问题标题】：Getting rid of outlines in HTML form elements that browsers display?摆脱浏览器显示的 HTML 表单元素中的轮廓？
【发布时间】：2010-11-21 16:14:33
【问题描述】：

有没有办法做到这一点？它因浏览器而异，显示的轮廓等等（Safari 及其蓝色发光，Firefox 及其单击提交按钮时的虚线轮廓......）

CSS 更可取，但 JS 也不错。

【问题讨论】：

【解决方案1】：

可以通过重置outline属性来移除轮廓：

input:focus, button:focus, textarea:focus, select:focus {
    outline: 0;
    background-color: #efefef;
}

但是，出于可访问性的原因，您应该像我在此处所做的那样包含另一个视觉指示器，以指示该元素已聚焦。

【讨论】：

【解决方案2】：

我相信您说的是大纲属性。要删除轮廓，您可以这样做；

element { outline:none; }

虽然出于可用性原因我不推荐它。

【讨论】：

【解决方案3】：

如果更改 CSS 中项目的默认属性，例如 border、background 等，这些元素的默认外观将不再适用。

例如，您可以根据需要为按钮、输入和字段集设置宽度、颜色和样式的边框。此外，背景（颜色和/或图像）会改变这些默认外观。

【讨论】：

【解决方案4】：

selector{
outline:none;
}

【讨论】：

【解决方案5】：

Si Yijiang 对代码级解决方案的回答。 Sitepoint 上还有一个good article。

Safari 中的蓝光（对焦环）是 Mac OS X 用户的偏好设置。用户可以调整显示的方式/时间。

【讨论】：