css ellipsis多行 - 如何刪除火狐的按鈕上的虛線輪廓以及鏈接?





text-overflow select (21)


下面的鏈接為我工作,想到分享 - 如果有人感興趣。

a, a:visited, a:focus, a:active, a:hover{
    outline:0 none !important;
}

乾杯!

我可以讓Firefox不要在鏈接上顯示醜陋的焦點輪廓:

a:focus { 
    outline: none; 
}

但是我怎樣才能為<button>標籤做到這一點? 當我這樣做時:

button:focus { 
    outline: none; 
}

當我點擊它們時,按鈕仍然有點焦點輪廓。

(是的,我知道這是一個可用性問題,但我想提供適合於設計的自己的焦點提示,而不是難看的灰點)




你可以在CSS中試試button::-moz-focus-inner {border: 0px solid transparent;}







[更新]此解決方案不再有效。 為我工作的解決方案是這一個https://.com/a/3844452/925560

標記為正確的答案不適用於Firefox 24.0。

要刪除Firefox的按鈕和錨點標籤上的虛線輪廓,我添加了以下代碼:

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

我在這裡找到了解決方案: http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html : http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html




如果您更喜歡使用CSS來擺脫虛線大綱:

/*for FireFox*/
    input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
    {   
        border : 0px;
    } 
/*for IE8 */
    input[type="submit"]:focus, input[type="button"]:focus
    {     
        outline : none; 
    }






在大多數情況下,如果不添加!important CSS代碼來說很!important ,它將無法工作。

所以,不要忘記添加!important

a, a:active, a:focus{
    outline: none !important; /* Works in Firefox, Chrome, IE8 and above */
}


或任何其他代碼:

button::-moz-focus-inner {
  border: 0 !important;
}



button::-moz-focus-inner {
  border: 0;
}



嘗試了大部分答案,但沒有一個對我有用。 當我意識到我必須擺脫Chrome上按鈕的藍色輪廓時,我發現了另一個解決方案。 在Chrome中從css自定義樣式的按鈕中刪除藍色邊框

此代碼適用於Windows 7上的Firefox 30版本。或許它可以幫助其他人:)

button:focus {outline:0 !important;}



:focus, :active {
    outline: 0;
    border: 0;
}



下面的CSS代碼可以消除這個問題:

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}



如果您在按鈕上有邊框,並且希望在刪除邊框的情況下隱藏Firefox中的虛線輪廓(因此它在按鈕上具有額外的寬度),您可以使用:

.button::-moz-focus-inner {
    border-color: transparent;
}



從上面嘗試了許多選項後,只有以下工作適合我。

*:focus, *:visited, *:active, *:hover  { outline:0 !important;}
*::-moz-focus-inner {border:0;}






使用此代碼測試Firefox 46和Chrome 49。

input:focus, textarea:focus, button:focus {
    outline: none !important;
}

之前 (白點可見)

之後 (白點不可見)

如果您只想應用於少數輸入字段,按鈕等。請使用更具體的代碼。

input[type=text] {
  outline: none !important;
}

快樂編碼!




網絡上有許多解決方案,其中許多解決方案都有效,但為了強制執行此操作,因此一旦使用以下內容,絕對沒有任何方法可以突出顯示/聚焦:

::-moz-focus-inner, :active, :focus {
    outline:none;
    border:0;
    -moz-outline-style: none;
}

這只是增加了一點額外的安全性並達成了交易!




它看起來像實現這一目標的唯一方法是設置

browser.display.focus_ring_width = 0

在每個瀏覽器的基礎上about:config。




只需添加此CSS為選擇框

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

這對我來說工作得很好。




我想你應該通過刪除焦點輪廓來真正了解自己在做什麼,因為它可能會導致鍵盤導航和輔助功能混亂。

如果由於設計問題需要將其取出,請將:focus狀態添加到按鈕,以將其替換為其他視覺提示,例如將邊框更改為更亮的顏色或類似的東西。

有時候我覺得有必要把這個討厭的大綱拿出來,但我總是準備一個備用焦點視覺提示。

並且永遠不要使用blur() js函數。 使用::-moz-focus-inner偽類。




從鏈接,按鈕和輸入元素中刪除虛線輪廓。

a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}



要禁用所選樣式表:

$('link[title="mystyle"]').prop('disabled', true);

如果您再也不希望再次應用樣式表,則可以.remove()它。 但如果您希望以後能夠重新啟用它,請不要這樣做。

要重新啟用樣式表,請執行此操作(只要您沒有remove樣式表的元素):

$('link[title="mystyle"]').prop('disabled', false);

在上面的代碼中,使用.prop而不是.attr很重要。 如果使用.attr ,代碼將在某些瀏覽器中運行,但不適用於Firefox。 這是因為, 根據MDNdisabledHTMLLinkElement DOM對象的屬性,但不是 link HTML元素的屬性。 使用disabled作為HTML屬性是非標準的。





css firefox