我今天一直在修改一个表单，并在 Chrome 中对其进行了测试。我注意到在选择一个带有边框的文本框时：0 或无，它仍然在它周围放置一个黄色边框。有谁知道摆脱这个边界的方法？我通常不会那么烦恼，但我使用的配色方案看起来真的很糟糕。
提前致谢。
问候，
理查德
PS 我也尝试过使用 !important，以防在 CSS 中将边框设置为黄色。
【问题讨论】：
outline: none;
标签： css google-chrome input textbox border
这是由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 锚点也可以接收焦点，并且它们的轮廓也可以设置样式。这对用户来说可能是一个有用的提示。
使用轮廓属性创建的轮廓是在一个框“上方”绘制的， 即，轮廓始终在顶部，并且不影响 框或任何其他框的位置或大小。所以， 显示或抑制轮廓不会导致回流或溢出。
轮廓可以应用于任何元素（同样，请确保不要混淆用户）。
与边框不同，它们不会影响框的位置或大小。这很重要，例如，当显示锚点有焦点时；如果您为锚添加边框，则整个框会明显移动边框的大小（try it）。相比之下，轮廓不会移动框。
这种框独立性的一个缺点是轮廓并不总是准确地呈现在您期望的位置。 Replaced elements 可能会以某种方式（现在或将来）呈现，在特定的高亮样式下可能看起来不太好。 <input type="range"> 非常适合看到这种行为。
这个大纲很实用，但不是很漂亮，甚至没有正确对齐（Chrome 26-29）。
当前（Chrome 21）按钮元素在指定轮廓的情况下看起来不正确（试试看 - 轮廓不跟随按钮的边缘）。
从 Chrome 26 开始，轮廓现在似乎与按钮的边缘正确对齐。
【讨论】：
这是outline，不是边框；使用大纲 CSS 属性。
【讨论】：