关于CSS：如何删除文本/输入框周围的边框


How to remove border (outline) around text/input boxes? (Chrome)

本问题已经有最佳答案，请猛点这里访问。

有人能解释如何删除文本/输入框周围的橙色或蓝色边框(轮廓)吗？我认为只有Chrome才会显示输入框处于活动状态。以下是我使用的输入CSS：

1
2
3
4
5
6
7
input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
}

enter image description here

相关讨论

此边框用于显示元素的焦点(即，您可以键入输入或按Enter键)。不过，您可以删除它：

1
2
3
textarea:focus, input:focus{
    outline: none;
}

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

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

1
2
3
*:focus {
    outline: none;
}
相关讨论

目前的答案对我来说不适用于bootstrap 3.1.1。以下是我必须覆盖的内容：

1
2
3
4
5
.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}
相关讨论

1
2
3
input:focus {
    outline:none;
}

这就行了。橙色轮廓不再出现。

相关讨论

1
<input style="border:none">

为我工作得很好。希望在HTML中修复它…：)

相关讨论

我找到了解决办法。我在CSS中使用了：outline:none;，它似乎起作用了。不管怎样，谢谢你的帮助。：)

相关讨论

解决方案

1
2
3
*:focus {
    outline: 0;
}

PS：用outline:0代替outline:none聚焦。这是有效的，更好的实践。

这将从所有元素和任何元素中删除铬黄色框架，无论它是什么和在哪里。

1
2
3
*:focus {
    outline: none;
}

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

1
2
3
4
5
6
7
8
9
input {
    background-color:transparent;
    border: 0px solid;
    height:30px;
    width:260px;
}
input:focus {
    outline:none;
}
相关讨论

集合

1
2
3
input:focus{
    outline: 0 none;
}

"！"重要"只是以防万一。这不是必要的。[现在它不见了。Ed.

相关讨论

我发现你也可以使用：

1
2
3
input:focus{
   border: transparent;
}

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

1
2
3
*:focus {
    outline: none;
}

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

1
2
3
input:focus {
   outline:none;
}