2010-07-24 66 views
15

我不能找出这一个。在Firefox中突出显示textarea时,我试图摆脱那种蓝光。删除集中textarea火狐焕发

这里是我的CSS:

textarea 
{ 
    margin:0; 
    padding:0; 
    width: 598px; 
    height: 600px; 
    resize: none; 
    outline: none; 
} 

:focus { 
     outline:0; 
     outline:none; 
} 

它删除它在Safari,但我有没有运气与Firefox。

谢谢! 马特

回答

9

您可以使用-moz-appearance:none;将其删除,但这可能会影响整个外观而不是您想要的。

+0

美丽..谢谢!它只是在所有textarea上删除它都很好。 – Matt 2010-07-24 00:22:45

0

您不能删除Firefox中的光芒我认为只有这样做的方法是通过为您的元素添加自定义边框,如border: 1px black;,这会使输入框根本没有光晕。

只有受欢迎允许outline标签的浏览器是Safari和Chrome(不确定关于Linux浏览器)。

+0

概要也由IE支持。 – circusbred 2014-01-21 21:24:25

2

我相当确定这是Mac OS X主题特定的行为。

+0

5年后,它仍然是一个Mac OS X主题指定的行为... – 2015-06-11 09:04:30

29

怎么样

*:focus {outline:0px none transparent;} 
+0

这也适用于Webkit/Chrome。 – mikermcneil 2012-01-02 00:48:59

+1

这是更好的答案。 – 2012-10-20 17:13:44

+4

不幸的是,在现代Firefox版本中(在Mac OS X上使用FF 21测试)“outline”不会影响围绕“”的蓝色“发光”:http://jsbin.com/elukeq/1/编辑 – fanaugen 2013-07-04 10:06:14

0

更好的方式来解决这个问题,在我看来,是定义一个自定义边框和:focus行为。

textarea { 
    margin:0; 
    padding:0; 
    width: 598px; 
    height: 600px; 
    resize: none; 
    outline: none; 
    border: none; 
} 

textarea:focus { 
     outline: none; 
     border: none; 
} 
1

只需添加或定义边框......例如,如果定义了边框并且我已经添加了大纲:无;到我的CSS,这是诀窍。

6

如果使用此上textarea的风格:

outline:none; 

...它应该与所有浏览器,而不是Firefox的

0

对#3

#Solution0:focus{ 
     border:solid #CCC 1px; 
     outline:1px none transparent; 
    } 

工作
0

稍微无关,但可能有帮助的答案:在我的情况下,蓝色的光晕导致对齐问题Firefox只会增加一个或多个像素,并且会改变整个元素的大小。我的猜测是,很多人会到达这个问题,出于同样的原因而不是完全取消的蓝色辉光,我来到了解决办法是样式输入元素填充在专门针对Firefox:

@-moz-document url-prefix() { 
    input:focus { 
     padding: 5px!important; 
    } 
} 

你可以根据您的需要更改此设置,但对您有些人了解@-moz-document url-prefix()规则可能会有所帮助。

0

我刚刚在文本输入上遇到了一个问题 - Firefox正在使用border属性创建蓝色发光:焦点 - 不是轮廓。

input:focus, textarea:focus { 
    outline: none; // for other browsers 
    border: none; // only necessary if you haven't set a border on the element 
}