CSS 如何重置/删除 chrome 的输入突出显示/焦点边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2943548/
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 reset / remove chrome's input highlighting / focus border?
提问by Jiew Meng
I have seen that chrome puts a thicker border on :focusbut it kind of looks off in my case where I've used border-radius also. Is there anyway to remove that?
我已经看到 chrome 放置了一个更厚的边框，:focus但在我也使用了 border-radius 的情况下，它看起来有点不对劲。有没有办法删除它？
回答by Pekka
You should be able to remove it using
您应该可以使用删除它
outline: none;
but keep in mind this is potentially bad for usability: It will be hard to tell whether an element is focused, which can suck when you walk through all a form's elements using the Tabkey - you should reflect somehow when an element is focused.
但请记住，这可能对可用性不利：很难判断一个元素是否被聚焦，当您使用Tab键遍历表单的所有元素时，这会很糟糕- 当一个元素被聚焦时，您应该以某种方式反映。
回答by George
I had to do all of the follow to completely remove it
我必须执行以下所有操作才能完全删除它
outline-style:none;
box-shadow:none;
border-color:transparent;
回答by Meditation Room
To remove the default focus, use the following in your default .css file :
要删除默认焦点，请在默认 .css 文件中使用以下内容：
:focus {outline:none;}
You can then control the focus border color either individually by element, or in the default .css:
然后，您可以通过元素单独或在默认 .css 中控制焦点边框颜色：
:focus {outline:none;border:1px solid red}
Obviously replace redwith your chosen hex code.
显然替换red为您选择的十六进制代码。
You could also leave the border untouched and control the background color (or image) to highlight the field:
您还可以保持边框不变并控制背景颜色（或图像）以突出显示该字段：
:focus {outline:none;background-color:red}
:-)
:-)
回答by Prashant Gupta
This will definitely work. Orange outline won't show up anymore.. Common for all tags:
这肯定会奏效。橙色轮廓将不再显示。所有标签通用：
*:focus {
outline: none;
}
Specific to some tag, ex: input tag
特定于某些标签，例如：输入标签
input:focus{
outline:none;
}
回答by noelietrex
border:0;
outline:none;
box-shadow:none;
This should do the trick.
这应该可以解决问题。
回答by miksiii
The simpliest way is to use something like this but note that it may not be that good.
最简单的方法是使用这样的东西，但请注意，它可能不是那么好。
input {
outline: none;
}
I hope you find this useful.
希望这个对你有帮助。
回答by Alain Zelink
Problem is when you already have an outline. Chrome still changes something and it's a real pain. I cannot find what to change :
问题是当您已经有了大纲时。Chrome 仍然会改变一些东西，这真的很痛苦。我找不到要更改的内容：
.search input {
outline: .5em solid black;
width:41%;
background-color:white;
border:none;
font-size:1.4em;
padding: 0 0.5em 0 0.5em;
border-radius:3px;
margin:0;
height:2em;
}
.search input:focus, .search input:hover {
outline: .5em solid black !important;
box-shadow:none;
border-color:transparent;;
}
.search button {
border:none;
outline: .5em solid black;
color:white;
font-size:1.4em;
padding: 0 0.9em 0 0.9em;
border-radius: 3px;
margin:0;
height:2em;
background: -webkit-gradient(linear, left top, left bottom, from(#4EB4F8), to(#4198DE));
background: -webkit-linear-gradient(#4EB4F8, #4198DE);
background: -moz-linear-gradient(top, #4EB4F8, #4198DE);
background: -ms-linear-gradient(#4EB4F8, #4198DE);
background: -o-linear-gradient(#4EB4F8, #4198DE);
background: linear-gradient(#4EB4F8, #4198DE);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4EB4F8', endColorstr='#4198DE');
zoom: 1;
}
回答by asawilliams
you could just set outline: none;and border to a different color on focus.
您可以outline: none;在焦点上将边框设置为不同的颜色。
