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

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


当前回答

Set

input:focus{
    outline: 0 none;
}

“!important”只是以防万一。这没有必要。[现在它消失了。–Ed.]

其他回答

input:focus {
    outline:none;
}

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

我找到了解决办法。我使用了:大纲:无;在CSS中,它似乎起了作用。无论如何,感谢您的帮助。:)

此边框用于显示元素已聚焦(即,您可以键入输入或按Enter键)。您可以使用outline属性删除它,但是:

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

您可能想添加一些其他方式,让用户知道哪个元素具有键盘焦点,但为了便于使用。

Chrome还将对其他元素应用高亮显示,例如用作模态的DIV。为了防止这些元素和所有其他元素上的高亮显示,可以执行以下操作:

*:focus {
    outline: none;
}


⚠️ 可访问性警告

请注意,从输入中删除大纲是一种可访问性错误做法。使用屏幕阅读器的用户将无法看到指针的焦点。更多信息请访问a11yproject

解决方案

*:focus {
    outline: 0;
}

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

对于Bootstrap 3.1.1,当前的答案不适用。以下是我必须忽略的内容:

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