摆脱 HTML/CSS 中输入框上的蓝色焦点矩形?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/3660831/
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
Getting rid of the blue focus rectangle on input boxes in HTML/CSS?
提问by Kyle
I'm running Mac OS so I can't really tell if this effect is presented on windows machines or not, so I apologize if this effect is not seen for you.
我正在运行 Mac OS,所以我无法确定这种效果是否在 Windows 机器上出现,所以如果您没有看到这种效果,我深表歉意。
Input and TextFields seem to have a blue rectangle when focused, atleast on Firefox and Chrome on a Mac. I have a custom focus effect on a site, and I'm wondering if I can avoid having this default selection behavior show. Google avoids it on their site. I went as far as to get the 'in-effect' CSS style for Google's input box, apply that to my css object. However, it still shows the blue rectangle. I'm not exactly sure what kind of voodoo google is doing, but it seems to me that it's neither HTML or CSS attributes. Anyone know how to avoid this effect? Thanks!
Input 和 TextFields 在聚焦时似乎有一个蓝色矩形,至少在 Mac 上的 Firefox 和 Chrome 上。我在网站上有自定义焦点效果,我想知道是否可以避免显示此默认选择行为。谷歌在他们的网站上避免使用它。我什至获得了 Google 输入框的“有效”CSS 样式,并将其应用于我的 css 对象。但是,它仍然显示蓝色矩形。我不确定谷歌在做什么类型的巫毒教,但在我看来它既不是 HTML 也不是 CSS 属性。有谁知道如何避免这种影响?谢谢!
回答by BoltClock
It is in fact a CSS attribute. This will hide that glowing effect:
它实际上是一个 CSS 属性。这将隐藏发光效果:
input:focus, textarea:focus {
outline: none;
}