禁用文本選擇onclick按鈕

如何避免用戶單擊按鈕時在文本週圍出現虛線選擇矩形，請參閱下圖。我已經嘗試添加我在另一個問題中看到的css規則user-select: none;，但這似乎不起作用。禁用文本選擇onclick按鈕

有什麼建議？

編輯：這個問題只出現在Firefox（與47.0版測試）

.button { 
 
    background-color: #1a1a1a; 
 
    border: none; 
 
    color: #f8f8f8; 
 
    padding: 10px 40px; 
 
    text-align: center; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    border-radius: 4px; 
 
    user-select: none; 
 
    -webkit-transition-duration: 0.3s;/* Safari */ 
 
    transition-duration: 0.3s; 
 
} 
 
.button:hover { 
 
    background-color: #595959; 
 
    /* Green */ 
 
    color: white; 
 
}

<button class="button">Button</button>

來源

2016-07-22 d4rty

'概述：無;'但有時它是有用的.. – moped

沒有選擇在你的代碼剪斷。對於所有瀏覽器都有問題？ – onestarblack

我使用Opera，Chrome和Firefox對其進行了測試。只有在Firefox中出現這個矩形。（我使用了所有瀏覽器的最新版本） – d4rty

對於刪除按鈕的虛線邊框在Firefox：

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

來源

2016-07-22 12:32:28 blonfu

這是有效的。但爲什麼我必須在Firefox中執行此操作？其他瀏覽器沒有在點擊上添加虛線邊框 – d4rty

是出於可訪問性原因。從MDN開始：「爲便於使用，Firefox會在焦點按鈕上添加一個小點邊框，這個邊框是通過CSS在瀏覽器樣式表中聲明的，但如果需要的話，可以使用'button'來添加自己的焦點樣式：：-moz-focus-inner {「'」[source]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button） – blonfu

簡單地把這個在你的CSS：

.yourclass 
{ 
outline:none; 
}

希望它可以幫助。

來源

2016-07-22 12:26:07 souki

這並不能解決Firefox 47.0中的問題 – d4rty

button.button:focus { 
    outline: 0; 
}

來源

2016-07-22 12:38:35

禁用文本選擇onclick按鈕

回答

相關問題