2010-07-24 68 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 
}