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

Question

我今天一直在修改表单,并在Chrome中测试它.我注意到在选择带有border:0或none的文本框时,它仍会在其周围放置黄色边框.有谁知道摆脱这个边界的方法？我通常不会那么困扰但是我使用的配色方案看起来非常糟糕.

提前致谢.

问候,

理查德

PS我也试过使用!重要,以防其他东西在CSS中将边框设置为黄色.

Answer 1

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

我同意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;    
}?

用户期望

有时,样式表作者可能希望围绕可视对象(如按钮,活动表单字段,图像映射等)创建轮廓,以使它们脱颖而出.

从理论上讲,轮廓可能用于美容目的,虽然除了表明焦点之外,我从未找到实际用途.但是,最好只在元素实际聚焦时显示类似焦点的轮廓.换句话说,当元素不是时,不要使元素看起来像焦点.

请记住,HTML锚点也可以获得焦点,并且它们的轮廓也可以设置样式.这对用户来说是一个有用的提示.

视觉渲染

使用轮廓属性创建的轮廓在"框"上方绘制,即轮廓始终位于顶部,并且不影响框或任何其他框的位置或大小.因此,显示或抑制轮廓不会导致回流或溢出.

轮廓可以应用于任何元素(同样,确保不要混淆用户).

与边框不同,它们不会影响盒子的位置或大小.这很重要,例如,当显示锚具有焦点时; 如果你为锚添加了一个边框,整个框会明显偏移边框的大小(试一试).相比之下,轮廓不会移动框.

这种盒子独立性的一个缺点是轮廓并不总能精确地呈现出您期望的位置.替换的元素可能以某种方式(现在或将来)呈现,这些方式可能与特定的突出显示样式不同.<input type="range">看到这种行为是一个很好的候选人.

_{这个大纲是功能性的,但不是很漂亮,甚至没有正确对齐(Chrome 26-29).}

当前没有按钮元素(Chrome 21)看起来正确,指定了轮廓(尝试并查看 - 轮廓不跟随按钮的边缘).

_{从Chrome 26开始,轮廓现在似乎与按钮的边缘正确对齐.}

Answer 2

这是一个outline,而不是边界; 使用outline CSS属性.