如何重置/删除铬的input突出显示/焦点边界?

我已经看到,chrome放在一个较厚的边框:focus但它在我的情况下,我也使用了边界半径的样子。 无论如何删除呢?

图像:铬:焦点边框

你应该能够使用它来删除它

 outline: none; 

但请记住,这对可用性可能是不利的:很难判断一个元素是否被聚焦,当使用Tab键浏览一个表单的所有元素时,这个元素可能会被吸引 – 当某个元素被聚焦时,你应该反应一下。

我必须做所有的后续才能完全删除它

 outline-style:none; box-shadow:none; border-color:transparent; 

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

 :focus {outline:none;} 

然后,您可以单独按元素或在默认的.css中控制焦点边框颜色:

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

显然用你select的hex代码replacered

您也可以不改变边框,并控制背景颜色(或图像)以突出显示该字段:

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

🙂

这一定会工作。 橙色轮廓将不会显示了。所有标签通用:

 *:focus { outline: none; } 

特定于某个标签,例如:input标签

 input:focus{ outline:none; } 
 border:0; outline:none; box-shadow:none; 

这应该做的伎俩。

你可以设置outline: none; 并且在焦点上边界到不同的颜色。

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

 input { outline: none; } 

希望这个对你有帮助。

问题是当你已经有一个大纲。 铬仍然改变了一些东西,这是一个真正的痛苦。 我找不到要更改的内容:

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

没有重点重点