Css 谷歌浏览器>；文本框>；激活时的黄色边框。。？

我今天修改了一个表单，并用Chrome进行了测试。我注意到，在选择一个边框为0或无的文本框时，它仍然会在其周围放置一个黄色边框。有人知道如何摆脱这个边界吗？我通常不会那么麻烦，但我用的配色方案看起来真的很糟糕

提前谢谢

问候,

理查德

PS我试过使用！同样重要的是，在CSS中将边框设置为黄色的情况下，这是由边框而不是边框引起的。您看到的特定样式在用户代理（浏览器）样式表中定义

我同意Chrome的大而突出的轮廓在很多情况下看起来都很糟糕，尽管它确实能让人清楚地看到哪个字段是活动的

---

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

---

删除大纲 您可以设置

大纲：无以完全删除高亮显示

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

这可能会降低可访问性/可用性。甚至完全删除大纲的危险性也是存在的

设计轮廓的样式
一个更好的选择是设计轮廓，使其仍然可见，但不那么令人讨厌。看

演示：

用户期望
有时，样式表作者可能希望在周围创建轮廓
可视对象，如按钮、活动表单字段、图像地图等。，
让他们脱颖而出

从理论上讲，这个轮廓可能是用来装饰的，尽管我从来没有发现过除了表示焦点以外的其他实际用途。然而，当一个元素实际聚焦时，最好只显示一个像轮廓一样的焦点。换句话说，当一个元素没有焦点时，不要让它看起来像焦点

请记住，HTML锚也可以接收焦点，它们的大纲也可以设置样式。这对用户来说是一个有用的提示

视觉渲染
使用轮廓属性创建的轮廓绘制在“框”上，
i、 例如，大纲始终位于顶部，并且不会影响
箱子或任何其他箱子的位置或尺寸。所以,，
显示或抑制轮廓不会导致回流或溢出

大纲可以应用于任何元素（同样，请确保不会混淆用户）

与边框不同，它们不会影响长方体的位置或大小。这是很重要的，例如，当显示一个锚有焦点时；如果将边框添加到锚点，则整个长方体将明显移动边框的大小（）。相比之下，轮廓不会移动框

这种框独立性的一个缺点是，大纲并不总是精确地呈现在您期望的位置。可能以（现在或将来）使用特定高光样式可能不好看的方式进行渲染
是看到这种行为的一个很好的候选者


这个轮廓很实用，但不是很漂亮，甚至没有正确对齐（Chrome 26-29）


按钮元素当前（Chrome 21）的外观与指定的轮廓不符（请尝试并查看-轮廓不跟随按钮的边缘）

从Chrome 26开始，轮廓现在看起来与按钮的边缘正确对齐。
它是一个
轮廓，而不是边框；使用outline CSS属性。
尝试
outline:none为了便于参考，一些关于css的大纲属性的有用链接：，想想Imememosol吧，将它们添加到书签中以备将来参考！非常有用！谢谢我甚至都不知道大纲的存在——在过去的6年里，不知怎么的，我跳过了那个大纲。。。对于这个应用程序（我爸爸的公司使用的离线应用程序）来说，可访问性并不重要。再次感谢。我相信outline是CSS3中的一个新属性。当任何元素上都不应该显示大纲时，使用*{outline:none；}是否存在任何风险？@Esteban-从所有元素中删除大纲不应该对视觉造成任何伤害。它独立于大多数（所有？）布局操作（根据规范）。对我来说，这是一个潜在的可用性问题，因为人们希望关注各种元素。锚可以接收焦点（不只是我的回答中讨论的表单元素）也毫无价值，因此如果从所有元素中删除大纲，也会失去焦点。
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;    
}​