如何删除输入文本元素上的边框突出显示 [英] How to remove the border highlight on an input text element

问题描述

当html元素聚焦（当前选择/标签到）时，许多浏览器（至少Safari和Chrome）将在其周围放置一个蓝色边框。

When an html element is 'focused' (currently selected/tabbed in to), many browsers (at least Safari and Chrome) will put a blue border around it.

对于我正在开发的布局，这是分心的，看起来不正确。

For the layout I am working on, this is distracting and does not look right.

<input type="text" name="user" class="middle" id="user" tabindex="1" />

FireFox似乎没有这样做，至少，让我用

FireFox does not seem to do this, or at least, will let me control it with

border: x;

如果有人能告诉我IE的表现，我会很好奇。

If someone can tell me how IE performs, I would be curious.

但是让Safari删除这个一点的flare会很不错。

But getting Safari to remove this little bit of flare would be nice.

谢谢

推荐答案

在您的情况下，请尝试：

In your case, try:

input.middle:focus {
    outline-width: 0;
}

或一般来说，影响所有基本表单元素：

Or in general, to affect all basic form elements:

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

---

a href =http://stackoverflow.com/users/2316623> Noah Whitmore 建议进一步支持具有 contenteditable 属性集的元素到 true （有效地使它们成为一种输入元素）。以下内容也应该针对这些（在支持CSS3的浏览器中）：

---

In the comments, Noah Whitmore suggested taking this even further to support elements that have the contenteditable attribute set to true (effectively making them a type of input element). The following should target those as well (in CSS3 capable browsers):

[contenteditable="true"]:focus {
    outline: none;
}

虽然我不会推荐它，但为了完整起见，禁用所有上的焦点轮廓：

Although I wouldn't recommend it, for completeness' sake, you could always disable the focus outline on everything with this:

*:focus {
    outline: none;
}

请记住，焦点轮廓是一个辅助功能和可用性功能;它可以将用户引导到当前关注的元素。

Keep in mind that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused.

这篇关于如何删除输入文本元素上的边框突出显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！