关于css：如何重置/删除chrome的输入突出显示/焦点边框？

How to reset / remove chrome's input highlighting / focus border?

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

我已经看到Chrome在:focus上加了一个更厚的边界，但在我使用边界半径的情况下，它看起来有点不太好。有没有办法把它移走？

image: chrome :focus border 。

你应该可以用

1	outline: none;

但请记住，这可能会对可用性造成不利影响：很难判断某个元素是否被聚焦，当您使用tabkbbkbd键遍历窗体的所有元素时，这会很糟糕——您应该在某个元素被聚焦时以某种方式反映出来。

相关讨论

要删除默认焦点，请在默认.css文件中使用以下内容：

1	:focus {outline:none;}

然后，您可以按元素单独控制焦点边框颜色，也可以在默认值中控制焦点边框颜色。css:

1	:focus {outline:none;border:1px solid red}

显然，用您选择的十六进制代码替换red。

您还可以保持边框不变，并控制背景色(或图像)以突出显示字段：

1	:focus {outline:none;background-color:red}

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

1
2
3

*:focus {
outline: none;
}

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

1
2
3

input:focus{
outline:none;
}

1
2
3

border:0;
outline:none;
box-shadow:none;

这样就可以了。

最简单的方法是使用这样的东西，但请注意，它可能没有那么好。

1
2
3

input {
outline: none;
}

希望你觉得这个有用。

问题是当你已经有了一个大纲。铬仍然会改变一些东西，这是一种真正的痛苦。我找不到要改变的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

.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;
}

No focus With focus

您可以将outline: none;和border设置为不同的聚焦颜色。