如何在HTML/CSS中去掉输入框的蓝色聚焦矩形？

Question

我使用的是Mac OS系统，无法确定此效果是否在Windows机器上呈现，如果您看不到这个效果，我很抱歉。

在Mac上，在Firefox和Chrome浏览器中，输入框和文本字段在聚焦时似乎会出现蓝色矩形。我在一个网站上使用自定义的聚焦效果，想知道能否避免显示默认的选择行为。谷歌在他们的站点上避免了这种情况。我甚至获取了谷歌输入框的“in-effect” CSS样式，并将其应用于我的css对象，但仍然显示蓝色矩形。我不确定谷歌在做什么，但在我看来，它似乎既不是HTML也不是CSS属性。有人知道如何避免这种效果吗？谢谢！

- Kalen

Answer 1

实际上这是一个 CSS 属性。这将隐藏那个发光的效果：

input:focus, textarea:focus {
    outline: none;
}

- BoltClock

---

请记住，这是一个浏览器可用性功能。用户，尤其是键盘用户，在输入前会想知道焦点在哪里。如果你移除了这个行为，请考虑提供其他方法来指示用户的焦点。 - Doug

补充一下Doug所说的，这不仅是一个可用性功能，也是一个辅助功能。请参见http://developer.chrome.com/extensions/a11y.html#keyboard。在OSX上，轮廓如此粗糙有点让人恼火。 - Sanjiv Jivan

对于某些非表单元素，即使对无障碍性没有用处或必要的元素（块级元素、拖动元素等），轮廓线仍会显示——这种样式非常适合避免它的出现，如果它真的不是一个表单元素，那么它就没有任何缺点。 - trisweb

@BoltClock，有时候我因为box-shadow而遇到这个问题。 - Mahmoud Saleh

如果我将tabindex应用于不可聚焦的元素，例如span和div，会发生什么情况。使用 *:focus { outline: none; } 可以解决问题，但我不确定这是否是正确的方法。请确认一下。 - codingbbq