如何删除文本/输入框周围的焦点边框（轮廓）？（铬）[重复]答案

【问题标题】：How to remove focus border (outline) around text/input boxes? (Chrome) [duplicate]如何删除文本/输入框周围的焦点边框（轮廓）？（铬）[重复]
【发布时间】：2011-03-24 18:01:24
【问题描述】：

谁能解释如何删除文本/输入框周围的橙色或蓝色边框（轮廓）？我认为只有在 Chrome 上才会显示输入框处于活动状态。这是我正在使用的输入 CSS：

input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
}

【问题讨论】：

请注意，oulines 也出现在不同的情况下：在 IE9 中，如果您使用选项卡选择按钮，您可以在按钮周围看到小点（即，您在按钮之前的字段内单击并转到下一个字段使用 Tab 直到到达按钮 [转到上一个字段是 Shift + Tab])
...如果有人需要从 Firefox 的选择元素中删除它：notes.jerzygangi.com/…
使用 border-style: none;背景颜色：白色；字体大小：13px；字体粗细：粗体；颜色：黑色；
正如@Torkil-Johnsen 在下面的评论中提到的那样，您可能希望提供不同的样式以使其更明显，但仅删除它对可访问性非常不利（例如，只使用键盘或其他辅助设备在元素之间切换）。
试试这个css，它对我有用textarea:focus, input:focus{ border: none; }

标签： css google-chrome input focus border

【解决方案1】：

我找到了解决方案。
我在 CSS 中使用了：outline:none;，它似乎奏效了。无论如何感谢您的帮助。 :)

【讨论】：

这就是您要删除的焦点轮廓。它的存在是有原因的：可用性。如果您将其删除，尤其是键盘用户会讨厌它。
@RoToRa 如果他使用阴影 CSS 3 制作一个更好的会怎么样？

【解决方案2】：

input:focus {
    outline:none;
}

这样就可以了。橙色轮廓将不再显示。

【讨论】：

代替 input:focus{ outline: 0; } -> 大纲：无；作品
除非您提供其他样式，否则不要这样做，这对可访问性很重要。见outlinenone.com
其实这个CSS还不够。例如，如果您使用 JQueryUI 选项卡，如果您只使用 CSS，则单击选项卡后会出现难看的蓝色边框。您确实需要添加 a:focus 或 li:focus，以防止出现边框。
这对可访问性不利，不应该这样做。

【解决方案3】：

此边框用于显示元素已聚焦（即，您可以输入输入或按 Enter 键）。不过，您可以使用 outline 属性将其删除：

textarea:focus, input:focus{
    outline: none;
}

您可能希望添加一些其他方式让用户知道哪个元素具有键盘焦点，但为了可用性。

Chrome 还将突出显示其他元素，例如用作模式的 DIV。为了防止突出显示这些元素和所有其他元素，您可以这样做：

*:focus {
    outline: none;
}

⚠️ 辅助功能警告

请注意，从输入中删除轮廓是一种可访问性不好的做法。使用屏幕阅读器的用户将无法看到他们的指针聚焦在哪里。更多info at a11yproject

【讨论】：

这对我不起作用。我正在使用 Chrome，最新更新。我把input:focus {outline: 0;}放在CSS里，但是当我打字的时候，蓝色的Mac轮廓还在。
使用outline: none
outline-style: 没有一个适用于 Chromium（版本 34）和 Firefox（版本 30）
移除默认在 :focus 上的这个大纲对可访问性不利。这意味着使用键盘导航的用户在点击选项卡时很难看到突出显示的链接/项目。如果有的话，应该增强元素的突出显示以使更清楚哪个项目具有焦点。
@TorkilJohnsen，虽然我 100% 同意元素应该明显聚焦，但默认的蓝色/橙色环行为并不总是正确的策略。只要采用某种策略（并在整个设计系统中一致采用），就应该编写 CSS 来支持该决定。

【解决方案4】：

这会从所有元素和任何元素中删除 chrome 中的橙色框架，无论它在哪里和在哪里

*:focus {
    outline: none;
}

【讨论】：

【解决方案5】：

这肯定会奏效。橙色轮廓将不再显示.. 所有标签通用：

*:focus {
    outline: none;
}

特定于某个标签，例如：输入标签

input:focus {
   outline:none;
}

【讨论】：

【解决方案6】：

请使用以下语法去除文本框的边框，去除浏览器样式的高亮边框。

input {
    background-color:transparent;
    border: 0px solid;
    height:30px;
    width:260px;
}
input:focus {
    outline:none;
}

【讨论】：

注意背景色属性的透明定义。你不需要那个，当你需要写东西时你可能会遇到一个大问题（你不会找到输入！）。顺便说一句，就个人而言，我会更改透明背景以选择一种颜色。例如，如果我的容器是红色的，我会在输入端使用白色背景。

【解决方案7】：

解决方案

*:focus {
    outline: 0;
}

PS：在焦点上使用outline:0 而不是outline:none。这是有效且更好的做法。

【讨论】：

不，不能在 Chrome 上工作
如何更好地实践？您需要解释原因，而不仅仅是这么说。这绝对不是更好的做法。

【解决方案8】：

设置

input:focus{
    outline: 0 none;
}

"!important" 以防万一。那没有必要。 [现在它消失了。 -Ed.]

【讨论】：

不要使用 !important，除非你真的必须使用它。
@Mackelito 您必须使用 !important 才能使用 Bootstrap

【解决方案9】：

当前的答案不适用于 Bootstrap 3.1.1。这是我必须覆盖的内容：

.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}

【讨论】：

box-shadow: none; 为我解决了问题。当我在没有:focus 的情况下添加元素时，它还消除了 Chrome 在无边框和输入框上放置的非常微妙的阴影。
这对我有用。由于某种原因 input:focus { outline:none;} 不起作用。
这对我有用。我正在使用 FF 最新的浏览器和大纲：没有一个不起作用。
此解决方案也适用于 bootstrap v4。
在 bootstrap 4 上，如果要删除的轮廓在汉堡移动菜单周围，则可以使用：

【解决方案10】：

<input style="border:none" >

对我来说效果很好。希望将其固定在 html 本身中... :)

【讨论】：

也可以。
你可以三倍：输入{边框：0不透明}
当我将border:none 添加到css 类时，它仍然显示输入字段的边框。内联 css style="border:none" 在哪里工作
@arun8 听起来您的 CSS 选择器不是最高的“优先级”（忘记了这个词，但类似，您的选择器的重要性，例如 p > span.class 比 span.class 更重要所以它将使用 p > span.class 中的代码
@arun8 你可以尝试在你的css类中使用“！important”

【解决方案11】：

我发现你也可以使用：

input:focus{
   border: transparent;
}

【讨论】：

问题的标题中可能有“边框”，但OP实际上是在询问默认大纲