CSS 如何删除文本/输入框周围的焦点边框（轮廓）？（铬合金）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3397113/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove focus border (outline) around text/input boxes? (Chrome)
提问by Joey Morani
Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using:
谁能解释一下如何删除文本/输入框周围的橙色或蓝色边框（轮廓）？我认为只有在 Chrome 上才会显示输入框处于活动状态。这是我正在使用的输入 CSS：
input {
background-color: transparent;
border: 0px solid;
height: 20px;
width: 160px;
color: #CCC;
}
回答by CEich
This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it, though:
此边框用于显示元素已获得焦点（即您可以输入输入或按 Enter 键）。不过，您可以删除它：
textarea:focus, input:focus{
outline: none;
}
You may want to add some other way for users to know what element has keyboard focus though for usability.
您可能希望为用户添加一些其他方式来了解哪些元素具有键盘焦点，但为了可用性。
Chrome will also apply highlighting to other elements such as DIV's used as modals. To prevent the highlight on those and all other elements as well, you can do:
Chrome 还将突出显示其他元素，例如用作模态的 DIV。为了防止突出显示这些元素和所有其他元素，您可以执行以下操作：
*:focus {
outline: none;
}
回答by gwintrob
The current answer didn't work for me with Bootstrap 3.1.1. Here's what I had to override:
当前的答案不适用于 Bootstrap 3.1.1。这是我必须覆盖的内容：
.form-control:focus {
border-color: inherit;
-webkit-box-shadow: none;
box-shadow: none;
}
回答by azram19
input:focus {
outline:none;
}
This will do. Orange outline won't show up anymore.
这会做。橙色轮廓将不再出现。
回答by Kailas
<input style="border:none" >
Worked well for me. Wished to have it fixed in html itself ... :)
对我来说效果很好。希望在 html 本身中修复它...... :)
回答by Joey Morani
I've found the solution.
I used: outline:none;in the CSS and it seems to have worked. Thanks for the help anyway. :)
我找到了解决方案。
我使用了：outline:none;在 CSS 中，它似乎奏效了。无论如何感谢您的帮助。:)
回答by Touhid Rahman
Solution
解决方案
*:focus {
outline: 0;
}
PS: Use outline:0instead of outline:noneon focus. It's valid and better practice.
PS：使用outline:0而不是outline:none聚焦。这是有效的和更好的做法。
回答by nonamehere
this remove orange frame in chrome from all and any element no matter what and where is it
这会从所有元素和任何元素中删除 chrome 中的橙色框架，无论它在哪里
*:focus {
outline: none;
}
回答by Tabish
Please use the following syntax to remove the border of text box and remove the highlighted border of browser style.
请使用以下语法移除文本框的边框并移除浏览器样式的高亮边框。
input {
background-color:transparent;
border: 0px solid;
height:30px;
width:260px;
}
input:focus {
outline:none;
}
回答by madd
Set
放
input:focus{
outline: 0 none;
}
"!important" is just in case. That's not necessary. [And now it's gone. –Ed.]
“！重要”是为了以防万一。那没有必要。[现在它不见了。– 编辑]
回答by Prashant Gupta
This will definitely work. Orange outline will not show anymore.. Common for all tags:
这肯定会奏效。橙色轮廓将不再显示。所有标签通用：
*:focus {
outline: none;
}
Specific to some tag, ex: input tag
特定于某些标签，例如：输入标签
input:focus {
outline:none;
}
