谷歌浏览器>文本框>黄色边框当激活..?

我今天一直在修改表单,并在Chrome中进行testing。 我注意到,select一个文本框,边框:0或没有,它仍然放在它周围的黄色边框。 有谁知道摆脱这个边界的方法吗? 我通常不会那么困扰,但看起来真的很可怕,我正在使用的配色scheme。

提前致谢。

问候,

理查德

PS我已经尝试使用!也很重要,以防其他情况在CSS中将边框设置为黄色。

这是由一个大纲 ,而不是一个边界造成的。 您看到的特定样式在用户代理(浏览器)样式表中定义。

我同意,在很多情况下,Chrome浏览器的大型高亮轮廓看起来很糟糕,尽pipe它确实显示了哪个字段处于活动状态。


截至2014年初,现在的亮点是蓝色(而不是黄色),亮点效果更小。 以下说明对于修改此样式仍然有效。


删除大纲

你可以设置outline: none; 在任何元素完全删除高光。

 input[type="text"], input[type="password"] { outline: none; } 

这可能(可能)降低了可访问性/可用性。 甚至有一个网站专门讨论完全删除轮廓的危险。

造型的大纲

更好的select是devise轮廓的样式,使其仍然可见,但不太讨厌。 请参阅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; }​ 

用户期望

有时,样式表作者可能希望围绕可视对象(如button,活动表单字段,图像映射等)创build轮廓,以使其突出显示。

从理论上讲,轮廓可能用于美容目的,虽然除了指出焦点之外,我从来没有find实际的用途。 但是,最好只在元素实际聚焦时才显示焦点轮廓。 换句话说,不要让一个元素看起来很专注。

请记住,HTML锚点也可以获得焦点,并且他们的轮廓也可以被devise。 这对用户来说可能是一个有用的提示。

可视化渲染

用轮廓属性创build的轮廓被绘制在一个框的“上方”,即轮廓始终位于顶部,不会影响框或其他框的位置或大小。 因此,显示或抑制轮廓不会导致回stream或溢出。

大纲可以应用于任何元素(同样,不要混淆用户)。

与边界不同,它们不影响框的位置或大小。 例如,当显示锚点具有焦点时,这是重要的; 如果你给锚点加了一个边框,整个盒子就会明显的移动边界的大小( 尝试它 )。 相比之下,大纲不会改变方块。

这种盒子独立性的一个缺点是轮廓并不总是精确地呈现在你期望的地方。 被replace的元素可能会以某种特定的突出显示风格(不pipe是现在还是未来)呈现出来。 <input type="range">是看到这种行为的一个很好的select。

在这里输入图像说明

这个大纲是function性的,但不是很漂亮,甚至是正确alignment(Chrome 26-29)。


当前button元素(Chrome 21)在指定轮廓时看起来是正确的(尝试一下,看看 – 轮廓不在button的边缘)。

现在轮廓线似乎与Chrome 26的button边缘正确alignment。

这是一个outline ,而不是边界。 使用大纲CSS属性。