單擊按鈕后，它們周圍都有一個高亮顯示。這是鉻合金的。
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>我在使用帶有主題的Bootstrap，但是我很確定不是這樣:我之前在另一個項目中注意到了這一點。
如果我使用& lta & gt標記而不是& ltbutton & gt。為什么？如果我想用& ltbutton & gt我該如何讓它消失？
我在另一個頁面上找到了這個問答，覆蓋按鈕焦點樣式對我有效。這個問題可能是針對裝有Chrome的MacOS的。
.btn:focus {
outline: none;
box-shadow: none;
}但是請注意，這對可訪問性有影響，除非您的按鈕和輸入有一個良好的一致的焦點狀態，否則不建議這樣做。根據下面的評論，有些用戶不能使用鼠標。
你想要這樣的東西:
<button class="btn btn-primary btn-block" onclick="this.blur();">...的。blur()方法正確地移除了焦點突出顯示，并且不會弄亂Bootstraps的樣式。
注意1:在下面列出的3個選項中，按鈕的行為是一樣的(點擊時沒有焦點環)，但是選擇和輸入在默認行為上略有不同。只有選項3始終去除按鈕、輸入和選擇周圍的聚焦環。請比較所有方法，并確保您理解其中的含義。
注2:由于CSS的級聯性質，CSS規則的順序很重要。
注3:任何焦點可見的方法都存在一些易訪問性問題。也就是說，在瀏覽器公開一個配置讓用戶選擇何時顯示可見的焦點環之前，focus-visible在可訪問性方面應該被認為比一直在任何地方使用焦點環差，但比這個問題的其他答案中提到的有害的:focus {outline:none}方法好。參見& quot關于可訪問性的說明& quot部分了解更多詳情。
選項1:使用:focus-visible偽類 :focus-visible偽類可用于為不通過鍵盤(即，通過觸摸或鼠標點擊)導航的用戶移除按鈕和各種元素上的輪廓和焦點環。
警告:截至2021年，focus-visible偽類**在現代瀏覽器中得到廣泛支持，但在邊緣瀏覽器中失敗**。如果舊瀏覽器支持很重要，下面選項2中的Javascript polyfill是最接近的。
/**
* Remove focus styles for non-keyboard focus.
*/
:focus:not(:focus-visible) {
outline: 0;
box-shadow: none;
}
/**
* Cross-browser styles for explicit focus via
* keyboard-based (eg Tab) navigation or the
* .focus-visible utility class.
*/
:focus,
.focus-visible:focus:not(:focus-visible) {
outline: 0;
box-shadow:
0 0 0 .2rem #fff,
0 0 0 .35rem #069;
}<h3>Defaults:</h3>
<button>Foo</button>
<input type="button" value="Bar"/>
<select><option>Baz</option></select>
<input type="text" placeholder="Qux"/>
<textarea placeholder="Quux" rows="1"></textarea>
<h3>Force focus on click:</h3>
<button class="focus-visible">Foo</button>
<input class="focus-visible" type="button" value="Bar"/>
<select class="focus-visible"><option>Baz</option></select>
<input class="focus-visible" type="text" placeholder="Qux"/>
<textarea class="focus-visible" placeholder="Quux" rows="1">
</textarea>我的理解是，焦點是在onMouseDown事件之后首次應用的，因此根據您的需要，在onMouseDown中調用e.preventDefault()可能是一個干凈的解決方案。這當然是一個易訪問性友好的解決方案，但顯然它調整了鼠標點擊的行為，這可能與您的web項目不兼容。
我目前正在使用這個解決方案(在一個react-bootstrap項目中),并且在單擊后我沒有收到按鈕的焦點閃爍或保留焦點，但是我仍然能夠切換我的焦點并直觀地看到相同按鈕的焦點。
不敢相信還沒人上傳這個。
用標簽代替按鈕。
<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>小提琴
雖然刪除所有焦點按鈕的輪廓很容易(如用戶1933897的回答)，但是從可訪問性的角度來看，這種解決方案是不好的(例如，請參見停止弄亂瀏覽器的默認焦點輪廓)
另一方面，如果你點擊按鈕后，瀏覽器認為它是聚焦的(我正看著你，OS X上的Chrome ),那么說服你的瀏覽器停止將你點擊的按鈕設置為聚焦的可能是不可能的。
那么，我們能做什么呢？我想到了幾個選擇。
1) Javascript (jQuery): $('。BTN’)。mouseup(function(){ this . blur()})
您正在指示您的瀏覽器在按鈕被單擊后立即移除按鈕周圍的焦點。通過使用mouseup而不是click，我們保持了基于鍵盤的交互的默認行為(mouseup不會被鍵盤觸發)。
2) CSS:。btn:hover { outline: 0！重要信息}
在這里，您只關閉懸停按鈕的輪廓。顯然這并不理想，但在某些情況下可能足夠了。
這對我很有效。 我創建了一個自定義類，它覆蓋了必要的CSS。
.custom-button:focus {
outline: none !important;
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
webkit-box-shadow適用于Chrome和safari瀏覽器。
這對我來說很有效，另一個沒有提到的解決方案。就扔在點擊事件里...
$(this).trigger("blur");或者從另一個事件/方法調用它...
$(".btn_name").trigger("blur");我找到了解決辦法。 當我們聚焦時，bootstrap使用box-shadow，所以我們只是禁用它(沒有足夠的信譽，無法上傳圖像:()。
我補充
.btn:focus{
box-shadow:none !important;
}它工作了。
如果使用規則:focus { outline:none；}要刪除輪廓，鏈接或控件將是可聚焦的，但對鍵盤用戶沒有焦點指示。像onfocus="blur()"這樣用JS移除它的方法甚至更糟，會導致鍵盤用戶無法與控件交互。
你可以使用的一些不錯的技巧包括添加:focus { outline:none；}用戶與鼠標交互時的規則，如果檢測到鍵盤交互，則再次刪除它們。林賽·伊萬斯為此做了一個自由選擇:https://github.com/lindsayevans/outline.js
但是我更喜歡在html或者body標簽上設置一個類。并在CSS文件中控制何時使用它。
例如(內聯事件處理程序僅用于演示):
<html>
<head>
<style>
a:focus, button:focus {
outline: 3px solid #000;
}
.no-focus a, .no-focus button {
outline: none;
}
</style>
</head>
<body id="thebody"
onmousedown="document.getElementById('thebody').classList.add('no-focus');"
onkeydown="document.getElementById('thebody').classList.remove('no-focus');">
<p>This her is <a href="#">a link</a></p>
<button>Click me</button>
</body>
</html>我確實把一支筆放在了一起:http://codepen.io/snobojohan/pen/RWXXmp
但是要注意有性能問題。每當用戶在鼠標和鍵盤之間切換時，都會強制重畫。關于避免不必要的繪畫的更多信息
我也注意到了這一點，盡管這讓我很惱火，但我認為沒有合適的方法來處理這件事。
我建議不要使用其他的解決方案，因為它們完全破壞了按鈕的可訪問性，所以現在，當你點擊按鈕時，你不會得到預期的焦點。
這是應該避免的！
.btn:focus {
outline: none;
}晚了，但誰知道它可能會幫助某人。 CSS看起來像這樣:
.rhighlight{
outline: none !important;
box-shadow:none
}HTML看起來會像這樣:
<button type="button" class="btn btn-primary rHighlight">Text</button>這樣你可以保持btn和它的相關行為。
如果以上對你不起作用，試試這個:
。btn:焦點{大綱:無；箱形陰影:無；邊框:2px純色 透明；}
正如user1933897指出的，這可能是針對裝有Chrome的MacOS的。
我在使用bootstrap (v4.4.1)類的表單中使用submit按鈕時發現了同樣的情況。當我使用JavaScript構建一個單頁面用戶界面來操作對DOM的所有必要更改時，問題出現了。表單數據通過使用JSON字符串而不是HTTP POST請求的“fetch”提交給服務器。請注意，通常表單的默認行為是重新加載文檔，并且通常會刷新按鈕，但是表單的默認行為是通過在表單的submit事件的偵聽器函數中使用e.preventDefault()來防止的(這是一個單頁UI，因此文檔永遠不會重新加載，并且到服務器的流量最小化為僅數據)。假設文檔沒有被重新加載，按鈕看起來會一直被按下，直到用戶在窗口的其他地方單擊。這是我遇到的問題:
& lt輸入類型= & quot提交& quotclass = & quotBTN BTN-主要& quot& gt
這是我用來解決按鈕保持按下的問題:
& lt輸入類型= & quot提交& quotclass = & quotBTN BTN-主要& quotonmouseup = & quotthis . blur()& quot；& gt
對于想要一個純css方式來做到這一點的人:
:focus:not(:focus-visible) { outline: none }這也適用于link等等，另外，它保持了鍵盤的可訪問性。最后，它會被不支持焦點可見的瀏覽器忽略
對于任何使用react-bootstrap并遇到這個問題的人來說，我做了以下工作:
.btn:focus {
/* the !important is really the key here, it overrides everything else */
outline: none !important;
box-shadow: none !important;
}在添加之前，事情并沒有工作！重要。
我在上面的評論中提到了這一點，但為了清晰起見，它值得作為一個單獨的答案列出來。只要您不需要在按鈕上獲得焦點，就可以在按鈕應用任何CSS效果之前使用focus事件將其移除:
$('buttonSelector').focus(function(event) {
event.target.blur();
});這避免了在使用click事件時可以看到的閃爍。這確實限制了界面，你不能切換到按鈕，但這不是所有應用程序的問題。
風格
.not-focusable:focus {
outline: none;
box-shadow: none;
}使用
<button class="btn btn-primary not-focusable">My Button</button>嘗試此解決方案移除按鈕周圍的邊框。將這段代碼添加到css中。
嘗試
button:focus{
outline:0px;
}如果不工作，然后使用下面的。
button:focus{
outline:none !important;
}這是工作，我希望能幫助你
.btn:focus, .btn:focus:active {
outline: none;
}有點核，但這是我在Angular 9上工作的簡單方法。與causon一起使用，因為它影響每個html元素。
*:focus {
outline: 0 !important;
}我們遇到了類似的問題，并注意到Bootstrap 3 在他們的標簽上沒有問題(在Chrome中)。看起來他們使用了輪廓樣式，允許瀏覽器決定什么是最好的，Chrome似乎做了你想要的:當聚焦時顯示輪廓，除非你只是點擊了元素。
對輪廓樣式的支持很難確定，因為瀏覽器可以決定這意味著什么。最好檢查幾個瀏覽器，并有一個后備規則。
另一種可能的解決方案是，當用戶單擊按鈕時，使用Javascript偵聽器添加一個類，然后使用另一個偵聽器刪除該類。這保持了可訪問性(可見的跳轉),同時也防止了Chrome的古怪行為——點擊時認為按鈕是焦點。
JS:
$('button').click(function(){
$(this).addClass('clicked');
});
$('button').focus(function(){
$(this).removeClass('clicked');
});CSS:
button:focus {
outline: 1px dotted #000;
}
button.clicked {
outline: none;
}完整示例如下: https://jsfiddle.net/4bbb37fh/
這將在單擊時移除輪廓，但在跳轉時保持焦點(對于a11y)
這個效果最好
.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}我發現了一個簡單的解決方法，在你的css代碼中添加下面一行。
button:focus { outline: none }與TS溶液反應
const btnRef = useRef<HTMLButtonElement | null>(null);
const handleOnMouseUp = () => {
btnRef.current?.blur();
};
<button
ref={btnRef}
onClick={handleOnClick}
onMouseUp={handleOnMouseUp}
>
<span className="icon-plus"></span> Add Page
</button>這個大綱:none對按鈕和標簽都有效
可以設置tabIndex="-1 "。當你在可聚焦控件間切換時，瀏覽器會跳過這個按鈕。
這里建議的其他“修復”只是去除了焦點輪廓，但仍然保留了按鈕標簽。然而，從可用性的角度來看，你已經移除了glow，所以你的用戶不會知道當前聚焦的按鈕是什么。
另一方面，使按鈕不可選項卡會影響可訪問性。
我用它來移除引導模式中X按鈕的焦點輪廓，它在底部有重復的“關閉”按鈕，所以我的解決方案對可訪問性沒有影響。
在CSS中添加以下內容:
*, ::after, ::before {
box-sizing: border-box;
outline: none !important;
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}