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

Question

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

提前致谢。

此致

理查德

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

Answer 1

这是由outline引起的，而不是边框​​引起的。您看到的特定样式在用户代理（浏览器）样式表中定义。

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

---

截至2014年初，亮点现在是蓝色（而不是黄色），高光效果更小。以下说明仍可用于修改此样式。

---

删除大纲

您可以在任何元素上设置outline: none;以完全删除突出显示。

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

这可能（可能）降低可访问性/可用性。完全删除轮廓的危险甚至有a website dedicated。

为大纲设置样式

更好的选择是对轮廓进行样式设置，使其仍然可见但不那么令人讨厌。见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锚点也可以获得焦点，并且它们的轮廓也可以设置样式。这对用户来说是一个有用的提示。

Visual Rendering

  

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

轮廓可以应用于任何元素（同样，请确保不要混淆用户）。

与边框不同，它们不会影响框的位置或大小。这很重要，例如，当显示锚具有焦点时;如果您为锚点添加了边框，则整个框会明显偏移边框的大小（try it）。相比之下，轮廓不会移动框。

这种独立性的一个缺点是轮廓并不总能精确地呈现在您期望的位置。 Replaced elements可能以某种方式（现在或将来）以特定的突出显示样式呈现出来。 <input type="range">是看到这种行为的好人选。

_{此大纲功能齐全，但不是很漂亮，甚至没有正确对齐（Chrome 26-29）。}

---

当前没有按钮元素（Chrome 21）看起来没有指定轮廓（尝试并查看 - 轮廓不跟随按钮的边缘）。

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

Answer 2

这是一个outline，而不是边界;使用outline CSS属性。