CSS 移除焦点文本区域上的 Firefox 发光
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3323207/
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
Remove Firefox glow on focused textarea
提问by Matt
I can't figure this one out. I'm trying to get rid of that blue glow when textareais highlighted in Firefox.
我无法弄清楚这一点。当textarea在 Firefox 中突出显示时，我试图摆脱那种蓝色光芒。
Here's my CSS:
这是我的 CSS：
textarea
{
margin:0;
padding:0;
width: 598px;
height: 600px;
resize: none;
outline: none;
}
:focus {
outline:0;
outline:none;
}
It removes it in Safari, but I'm have no luck with Firefox.
它在 Safari 中将其删除，但我对 Firefox 不走运。
Thanks! Matt
谢谢！马特
采纳答案by user11977
You can remove it with -moz-appearance:none;, though that may affect the whole appearance more than you're wanting.
您可以使用 删除它-moz-appearance:none;，尽管这可能会比您想要的更影响整个外观。
回答by isildur4
how about
怎么样
*:focus {outline:0px none transparent;}
回答by Steve
If you use this on the textarea style:
如果您在 textarea 样式上使用它：
outline:none;
... it should work with all browsers, not just Firefox
...它应该适用于所有浏览器，而不仅仅是 Firefox
回答by Delan Azabani
I'm fairly sure that's a Mac OS X theme-specific behaviour.
我很确定这是 Mac OS X 主题特定的行为。
回答by Brady Mills Graphics
Just add or define a border... for instance, if a border is defined and I've added outline: none; to my CSS, this does the trick.
只需添加或定义边框...例如，如果定义了边框并且我添加了轮廓：无；对我的 CSS 来说，这可以解决问题。
回答by robsonmwoc
The better way to fix this, in my opinion, is define a custom border and :focusbehavior.
在我看来，解决此问题的更好方法是定义自定义边框和:focus行为。
textarea {
margin:0;
padding:0;
width: 598px;
height: 600px;
resize: none;
outline: none;
border: none;
}
textarea:focus {
outline: none;
border: none;
}
回答by jolt
You cannot remove the glow in Firefox I think.. Only way to do that would be by adding a custom border to your element, like border: 1px black;, that would make the input box have no glow at all.
我认为您无法在 Firefox 中删除发光。唯一的方法是向您的元素添加自定义边框，例如border: 1px black;，这将使输入框根本没有发光。
Only popularbrowsers which allows the outlinetag are Safari and Chrome (not sure about linux browsers).
只有允许标记的流行浏览器outline是 Safari 和 Chrome（不确定 linux 浏览器）。
回答by Vainglory07
on #3
在#3
#Solution0:focus{
border:solid #CCC 1px;
outline:1px none transparent;
}
?
?
回答by billynoah
Slightly unrelated but possibly helpful answer: In my case the blue glow was causing an alignment problem in Firefox only since it adds an extra pixel or two and changes the overall element size. My guess is a lot of people will arrive at this question for similar reasons and rather than remove the blue glow altogether, the solution I came to was to style the input element padding in specifically for Firefox:
稍微不相关但可能有帮助的答案：在我的情况下，蓝色发光仅在 Firefox 中导致对齐问题，因为它添加了一个或两个额外的像素并更改了整体元素大小。我的猜测是很多人会出于类似的原因提出这个问题，而不是完全删除蓝色发光，我提出的解决方案是专门为 Firefox 设置输入元素填充的样式：
@-moz-document url-prefix() {
input:focus {
padding: 5px!important;
}
}
You can change this to suite your needs but it may be helpful for some of you to know about the @-moz-document url-prefix()rule.
您可以更改此设置以满足您的需求，但了解该@-moz-document url-prefix()规则可能对你们中的一些人有所帮助。
回答by rob-gordon
I just had an issue with this on a text input- Firefox was using the border property to create the blue glow on :focus - not outline.
我刚刚在文本输入上遇到了这个问题 - Firefox 正在使用边框属性在 :focus 上创建蓝色发光 - 而不是轮廓。
input:focus, textarea:focus {
outline: none; // for other browsers
border: none; // only necessary if you haven't set a border on the element
}
