CSS 谷歌浏览器 > 文本框 > 活动时的黄色边框..？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3875195/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Chrome > Textboxes > Yellow border when active..?
提问by ClarkeyBoy
Ive been modifying a form today, and testing it in Chrome. I noticed that on selecting a textbox, with border: 0 or none, it still puts a yellow border around it. Does anyone know of a way to get rid of this border? I usually wouldnt be that bothered but it looks really horrible with the colour scheme I am using.
我今天一直在修改一个表单，并在 Chrome 中测试它。我注意到在选择一个带有边框：0 或无的文本框时，它仍然会在它周围放置一个黄色边框。有谁知道摆脱这个边界的方法？我通常不会那么烦恼，但我使用的配色方案看起来真的很糟糕。
Thanks in advance.
提前致谢。
Regards,
问候，
Richard
理查德
PS I have tried using !important too, in case something else is setting the border to yellow in the CSS.
PS 我也试过使用 !important ，以防其他东西在 CSS 中将边框设置为黄色。
回答by Tim Medora
This is caused by an outline, not a border. The specific style you see is defined in the user agent (browser) stylesheet.
这是由轮廓而不是边框引起的。您看到的特定样式在用户代理（浏览器）样式表中定义。
I agree that Chrome's large, highlighted outline looks bad in many cases, although it does make it obvious which field is active.
我同意 Chrome 的大而突出的轮廓在许多情况下看起来很糟糕，尽管它确实使哪个字段处于活动状态一目了然。
As of early 2014, the highlight is now blue (instead of yellow) and the highlight effect is smaller. The following instructions are still valid for modifying this style.
截至 2014 年初，高光现在是蓝色（而不是黄色），高光效果更小。以下说明对于修改此样式仍然有效。
Removing the Outline
去除轮廓
You can set outline: none;on any element to remove the highlight completely.
您可以outline: none;在任何元素上设置以完全删除突出显示。
input[type="text"], input[type="password"] { outline: none; }
This potentially (likely) reduces accessibility/usability. There is even a website dedicatedto the dangers of completely removing the outline.
这可能（可能）降低可访问性/可用性。甚至有一个网站专门介绍完全删除大纲的危险。
Styling the Outline
造型轮廓
A better alternative is to style the outline so that it is still visible but less obnoxious. See https://developer.mozilla.org/en-US/docs/CSS/outline
更好的选择是设置轮廓样式，使其仍然可见但不那么令人讨厌。请参阅https://developer.mozilla.org/en-US/docs/CSS/outline
Demo:http://jsfiddle.net/G28Gd/2/
演示：http : //jsfiddle.net/G28Gd/2/
INPUT[type="text"]:focus,
INPUT[type="number"]:focus,
INPUT[type="email"]:focus,
INPUT[type="search"]:focus,
INPUT[type="password"]:focus,
INPUT[type="range"]:focus
{
outline: 1px solid #0033dd;
}?
User Expectations
用户期望
At times, style sheet authors may want to create outlines around visual objects such as buttons, active form fields, image maps, etc., to make them stand out.
有时，样式表作者可能希望围绕可视对象（例如按钮、活动表单域、图像映射等）创建轮廓，以使它们脱颖而出。
In theory, the outline may be used for cosmetic purposes though I've never found a practical use other than indicating focus. However, it's best to only show a focus-like outline when an element is actually focused. In other words, don't make an element look focused when it is not.
理论上，轮廓可以用于装饰目的，尽管我从未发现除了指示焦点之外的实际用途。但是，最好仅在元素真正获得焦点时才显示类似焦点的轮廓。换句话说，不要让一个元素看起来没有聚焦。
Remember that HTML anchors can also receive focus and that their outline can also be styled. This can be a useful cue to the user.
请记住，HTML 锚点也可以接收焦点，并且它们的轮廓也可以设置样式。这对用户来说可能是一个有用的提示。
Visual Rendering
视觉渲染
The outline created with the outline properties is drawn "over" a box, i.e., the outline is always on top, and does not influence the position or size of the box, or of any other boxes. Therefore, displaying or suppressing outlines does not cause reflow or overflow.
使用轮廓属性创建的轮廓是在框“上方”绘制的，即轮廓始终位于顶部，并且不会影响框或任何其他框的位置或大小。因此，显示或抑制轮廓不会导致回流或溢出。
An outline may be applied to any element (again, make sure to not confuse the user).
大纲可以应用于任何元素（再次确保不要混淆用户）。
Unlike borders, they do not impact the position or size of the box. This is important, for example, when showing that an anchor has focus; if you added a border to the anchor, the whole box would visibly shift by the size of the border (try it). By comparison, an outline will not shift the box.
与边框不同，它们不会影响框的位置或大小。这很重要，例如，当显示一个锚有焦点时；如果向锚点添加边框，则整个框将明显移动边框的大小（试试看）。相比之下，轮廓不会移动框。
One downside of this box-independence is that the outline doesn't always render precisely where you would expect. Replaced elementsmay render in ways (now, or in the future) that might not look good with a particular highlight style. <input type="range">is a good candidate for seeing this behavior.
与框无关的一个缺点是轮廓并不总是准确地呈现在您期望的位置。替换元素的渲染方式（现在或将来）可能在特定高亮样式下看起来不太好。<input type="range">是看到这种行为的一个很好的候选者。
This outline is functional, but not very pretty or even aligned correctly (Chrome 26-29).
这个轮廓是功能性的，但不是很漂亮，甚至没有正确对齐（Chrome 26-29）。
Button elements do not currently (Chrome 21) look correct with an outline specified (try it and see - the outline does not follow the edge of the button).
按钮元素当前（Chrome 21）在指定轮廓的情况下看起来不正确（尝试并查看 - 轮廓不跟随按钮的边缘）。
Outlines now appear to be correctly aligned with the edges of a button as of Chrome 26.
从 Chrome 26 开始，轮廓现在似乎与按钮的边缘正确对齐。
回答by Core Xii
It's an outline, not a border; Use the outline CSS property.
它是一个outline，而不是一个边界；使用大纲 CSS 属性。
