这个问题在这里已经有了答案:How to remove the border highlight on an input text element (20 answers) 7年前关闭。
谁能解释如何删除文本/输入框周围的橙色或蓝色边框(轮廓)?我认为只有在 Chrome 上才会显示输入框处于活动状态。这是我正在使用的输入 CSS:
input {
background-color: transparent;
border: 0px solid;
height: 20px;
width: 160px;
color: #CCC;
}
https://i.stack.imgur.com/HSKYf.png
textarea:focus, input:focus{ border: none; }
此边框用于显示元素已获得焦点(即您可以输入输入内容或按 Enter 键)。不过,您可以使用 outline 属性将其删除:
textarea:focus, input:focus{
outline: none;
}
您可能希望添加一些其他方式让用户知道哪些元素具有键盘焦点,但出于可用性考虑。
Chrome 还将突出显示其他元素,例如用作模式的 DIV。为了防止突出显示这些元素和所有其他元素,您可以执行以下操作:
*:focus {
outline: none;
}
⚠️ 可访问性警告
请注意,从输入中删除轮廓是一种可访问性不好的做法。使用屏幕阅读器的用户将无法看到他们的指针聚焦在哪里。更多info at a11yproject
当前的答案不适用于 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;
}
这会做。橙色轮廓将不再出现。
<input style="border:none" >
对我来说效果很好。希望将其固定在 html 本身中... :)
我找到了解决方案。
我在 CSS 中使用了:outline:none;
,它似乎有效。无论如何感谢您的帮助。 :)
这会从所有元素和任何元素中删除 chrome 中的橙色框架,无论它在哪里和在哪里
*:focus {
outline: none;
}
解决方案
*:focus {
outline: 0;
}
PS:在焦点上使用 outline:0
而不是 outline:none
。这是有效且更好的做法。
请使用以下语法删除文本框的边框,并删除浏览器样式的高亮边框。
input {
background-color:transparent;
border: 0px solid;
height:30px;
width:260px;
}
input:focus {
outline:none;
}
放
input:focus{
outline: 0 none;
}
“!important”以防万一。那没有必要。 [现在它消失了。 ——编者。]
我发现你也可以使用:
input:focus{
border: transparent;
}
这肯定会奏效。橙色轮廓将不再显示。所有标签通用:
*:focus {
outline: none;
}
特定于某个标签,例如:输入标签
input:focus {
outline:none;
}
不定期副业成功案例分享
input:focus {outline: 0;}
放在 CSS 中,但是当我输入时,蓝色的 Mac 轮廓仍然存在。outline: none