如何删除文本/输入框周围的边框（轮廓）？ （铬）

Question

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

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

Answer 1

此边框用于显示元素是否已聚焦（即您可以输入输入或按Enter按钮）。但是你可以删除它：

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

您可能希望为用户添加一些其他方式，以便了解哪些元素具有键盘焦点，但是可用性。

Chrome还会将突出显示应用于其他元素，例如用作模式的DIV。为了防止在这些元素和所有其他元素上突出显示，您可以执行以下操作：

*:focus {
    outline: none;
}

Answer 2

当前的答案对我来说对Bootstrap 3.1.1不起作用。这是我必须覆盖的内容：

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

Answer 3

input:focus {
    outline:none;
}

这样做。橙色轮廓将不再出现。

Answer 4

<input style="border:none" >

为我工作得很好。希望在html本身修复它...：）

Answer 5

我找到了解决办法 我在CSS中使用了outline:none;，它似乎有效。无论如何，谢谢你的帮助。 ：）

Answer 6

<强>解决方案

*:focus {
    outline: 0;
}

PS：在焦点上使用outline:0代替outline:none。这是有效的，更好的做法。

Answer 7

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

*:focus {
    outline: none;
}

Answer 8

请使用以下语法删除文本框的边框，并删除浏览器样式的突出显示边框。

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

Answer 9

设置

input:focus{
    outline: 0 none;
}

“！important”就是以防万一。这不是必要的。 [现在它已经消失了。 -Ed。]

Answer 10

我发现你也可以使用：

input:focus{
   border: transparent;
}

Answer 11

这肯定会奏效。橙色轮廓将不再显示.. 所有标签的共同点：

*:focus {
    outline: none;
}

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

input:focus {
   outline:none;
}