Google Chrome浏览器>文本框>黄色边框活动时？ [英] Google Chrome > Textboxes > Yellow border when active..?
问题描述
我今天已修改表单，并在Chrome中测试。我注意到，选择一个文本框，边框：0或无，它仍然在它周围有一个黄色边框。有谁知道一种方法摆脱这个边界？我通常不会那么麻烦，但它看起来真正可怕的我使用的配色方案。
提前感谢。
此致，
理查德
我已尝试使用！在CSS中将边框设置为黄色。
这是由大纲，而不是边框。在用户代理（浏览器）样式表中定义了您所看到的特定样式。
我同意Chrome的大型突出显示的轮廓在许多情况下看起来很糟糕，
截至2014年初，突出显示现在是蓝色（而不是黄色）并且突出效果较小。以下说明仍然可用于修改此样式。
删除大纲
您可以在任何元素上设置 outline：none; 以完全删除突出显示。
input [type =text]，input [type =password] {outline：none; }
这可能会降低可访问性/可用性。甚至还有一个网站专门介绍了完全删除大纲的危险。
设计大纲样式
一个更好的选择是对大纲进行样式设置，使其仍然可见，但不太讨厌。请参见 https://developer.mozilla.org/en-US/docs/CSS / outline
演示： 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;
}
用户期望
< blockquote>
有时，样式表作者可能想要创建围绕
的视觉对象（如按钮，活动表单字段，图像映射等）的轮廓，以使它们脱颖而出。
在理论上，大纲可能用于美容目的，虽然我从未发现除了指示焦点之外的实际用途。但是，最好只在元素实际聚焦时显示焦点状轮廓。换句话说，当不是元素时，不要使元素看起来集中。
请记住，HTML定位点也可以接受焦点，并且它们的轮廓也可以设置样式。这可以是对用户有用的提示。
可视化呈现
使用大纲属性创建的大纲绘制在框$上，
即大纲总是在顶部，并且不影响
位置或大小的框或任何其他框。因此，显示或抑制轮廓的
不会导致回流或溢出。
轮廓可以应用于任何元素，请务必不要混淆用户）。
与边框不同，它们不会影响框的位置或大小。这是重要的，例如，当显示锚具有焦点时;如果您向锚点添加了边框，则整个框将显示为按边框的大小移动（尝试）。相比之下，大纲不会移动盒子。
这个框的一个缺点是独立性是大纲并不总是准确地呈现在你想要的地方。 替换的元素可能会以某种方式（现在，或在未来），对于特定的突出显示样式可能看起来不太好。 < input type =range> 是查看此行为的好候选。
此大纲功能齐全，但不是非常漂亮，甚至是正确对齐（Chrome 26-29）。
目前没有（Chrome 21）使用指定的大纲查看正确（请尝试看看 - 大纲不在按钮边缘之后）。
现在，轮廓似乎与Chrome 26的按钮边缘正确对齐。
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.
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.
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.
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.
Removing the Outline
You can set outline: none; on any element to remove the highlight completely.
input[type="text"], input[type="password"] { outline: none; }
This potentially (likely) reduces accessibility/usability. There is even a website dedicated to 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
Demo: 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.
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 elements may 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.
This outline is functional, but not very pretty or even aligned correctly (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).
Outlines now appear to be correctly aligned with the edges of a button as of Chrome 26.
这篇关于Google Chrome浏览器>文本框>黄色边框活动时？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
