谷歌浏览器 >文本框 >活动时黄色边框

问题描述

我今天一直在修改一个表单，并在 Chrome 中对其进行了测试.我注意到在选择一个带有边框的文本框时:0 或无，它仍然在它周围放置一个黄色边框.有谁知道摆脱这个边界的方法?我通常不会那么烦恼，但我使用的配色方案看起来真的很糟糕.

提前致谢.

问候，

理查德

PS 我也尝试过使用 !important，以防在 CSS 中将边框设置为黄色.

这是由 轮廓，不是边框.您看到的特定样式在用户代理(浏览器)样式表中定义.

我同意 Chrome 的大而突出的轮廓在许多情况下看起来很糟糕，尽管它确实使哪个字段处于活动状态很明显.

截至 2014 年初，高光现在是蓝色(而不是黄色)，高光效果更小.以下说明对于修改此样式仍然有效.

删除轮廓

您可以在任何元素上设置 outline: none; 以完全去除高亮.

input[type="text"], input[type="password"] { 大纲:无；}

这可能(可能)降低了可访问性/可用性.甚至还有一个专门的网站来讨论完全删除大纲的危险.

设置大纲样式

更好的选择是设置轮廓的样式，使其仍然可见但不那么令人讨厌.请参阅 https://developer.mozilla.org/en-US/docs/CSS/大纲

演示: http://jsfiddle.net/G28Gd/2/

INPUT[type="text"]:focus,输入[类型=数字"]:焦点，INPUT[type="email"]:焦点，输入[类型=搜索"]:焦点，输入[类型=密码"]:焦点，输入[类型=范围"]:焦点{轮廓:1px 实心#0033dd；}

用户期望

有时，样式表作者可能希望在周围创建轮廓视觉对象，例如按钮、活动表单域、图像映射等，让他们脱颖而出.

理论上，轮廓可以用于装饰目的，但除了指示焦点之外，我从未发现其他实际用途.但是，最好仅在元素实际聚焦时才显示类似焦点的轮廓.换句话说，不要让一个元素看起来没有焦点.

请记住，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.}

这篇关于谷歌浏览器 >文本框 >活动时黄色边框..?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！