我正在做一個網頁，我想要自定義樣式& ltbutton & gt標簽。所以用CSS，我說:border: none。現在它在safari中工作得很好，但在chrome中，當我點擊其中一個按鈕時，它會在周圍出現一個令人討厭的藍色邊框。我以為button:active { outline: none }或button:focus { outline:none }可以工作，但都不行。有什么想法嗎？

這是它被點擊前的樣子(以及我希望它被點擊后的樣子):

這就是我所說的邊界:

這是我的CSS:

button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
}

button.change {
    background-color: #F88F00;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.change:hover {
    cursor: pointer;
    background-color: #F89900;
}

button:active {
    outline: none;
    border: none;
}

不建議這樣做，因為這會降低網站的可訪問性；更多信息，請看這篇文章。

也就是說，如果您堅持，這個CSS應該可以工作:

button:focus {outline:0;}

或者去js fiddle:http://jsfiddle.net/u4pXu/看看吧

或者在這個片段中:

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.change:hover {
cursor: pointer;
background-color: #F89900;
}

button:active {
outline: none;
border: none;
}

button:focus {outline:0;}

<button class="launch">Launch with these ads</button> 
<button class="change">Change</button>

等等！輪廓那么丑是有原因的！

在移除難看的藍色輪廓之前，您可能需要考慮可訪問性。默認情況下，藍色輪廓放置在可聚焦的元素上。這是為了讓有輔助功能問題的用戶能夠通過跳轉到該按鈕來獲得焦點。一些用戶不具備使用鼠標的運動技能，只能使用鍵盤(或其他輸入設備)進行計算機交互。當您移除藍色輪廓時，不再有視覺指示器來指示哪個元素被聚焦。如果您要刪除藍色輪廓，您應該用另一種類型的按鈕被聚焦的視覺指示來替換它。

可能的解決方案:聚焦時使按鈕變暗

對于下面的例子，Chrome的藍色輪廓首先是通過使用button:focus { outline:0！重要；}

以下是正常顯示的基本引導按鈕:

以下是按鈕獲得焦點時的情況:

以下是按下時的按鈕:

正如您所看到的，按鈕在獲得焦點時會變暗一些。就我個人而言，我建議將焦點按鈕設置得更暗一些，這樣在焦點狀態和按鈕的正常狀態之間會有非常明顯的區別。

這不僅僅是針對殘疾用戶的

讓你的網站更容易被訪問是一件經常被忽視的事情，但是它可以幫助你在你的網站上創造一個更有成效的體驗。有許多普通用戶使用鍵盤命令來瀏覽網站，以便將手放在鍵盤上。

在這個問題的實例中，我必須指定box-shadow: none

button:focus {
  outline:none;
  box-shadow: none;
}

我只是通過選擇所有并應用outline:none to everything，從頁面中的所有標簽中移除輪廓:)

*:focus {outline:none}

正如bagofcole提到的，您可能需要添加！也很重要，所以樣式應該是這樣的:

*:focus {outline:none !important}

別忘了！重要宣言，為了更好的結果

button:focus {outline:0 !important;}

一個規則！無論該規則出現在CSS文檔中的什么位置，都將始終應用重要屬性。

移除輪廓對于可訪問性來說太可怕了！理想情況下，只有當用戶打算使用鍵盤時，聚焦環才會出現。

用途:焦點可見。所有主流瀏覽器都支持它(caniuse)。

/* Remove outline for non-keyboard :focus */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Optional: Customize :focus-visible */
:focus-visible {
  outline-color: lightgreen;
}

將此添加到您的CSS文件中。

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

Chrome和其他瀏覽器的補丁

button:focus { outline: none !important; box-shadow: none !important; }

對于這個問題:

用這個:

*{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

結果:

使用以下任一方式:

:active {
    outline:none;
}

或者這個如果沒用:

:active {
   outline:none !important;
}

這個對我很管用(至少FF和Chrome是這樣)。不要以:焦點狀態為目標，只要以:活動狀態為目標，當用戶點擊一個鏈接時，這將消除瀏覽器中的突出顯示。但是當有殘疾的用戶在頁面中使用tab鍵或shift-tab鍵時，它仍然會保留焦點狀態。雙方皆大歡喜。:)

如果您使用的是Bootstrap 4.1或其他版本，大多數解決方案都將不起作用。經過多次敲打，我發現你需要應用無陰影類:

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>

對于任何使用Bootstrap并有此問題的人，他們使用:active:focus以及just :active and :focus，因此您需要:

element:active:focus {
    outline: 0;
}

希望能節省一些時間來解決這個問題，讓我有點頭疼，想知道為什么這么簡單的東西卻不起作用。

我對bootstrap也有同樣的問題。我解決了輪廓和框陰影

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}

這是對我有用的:

button:focus {
    box-shadow:none;
}

解決可訪問性問題的另一種方法是使用一點Javascript，這里還沒有提到。歸功于這篇來自hackernoon的頗有見地的博客帖子:https://hacker noon . com/remove-than-ugly-focus-ring-and-keep-it too-6c 8727 fefcd 2

這里的方法非常簡單而有效:當人們開始使用tab鍵導航頁面時添加一個類(當再次切換到鼠標時可以選擇刪除它)。然后，您可以使用該類來顯示或不顯示焦點輪廓。

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

我面臨著同樣的問題，所以我用了簡單的CSS-

.custom-button {
    outline: none
}

嘗試對所有有藍色邊框問題的元素使用此代碼

*{
outline: none;
}

或者

*{
outline-style: none;
}

直到所有現代瀏覽器都開始支持css-selector :focus-visible， 保存可訪問性的最簡單也可能是最好的方法是只為鼠標用戶移除這個棘手的焦點，而為鍵盤用戶保存它:

1.使用這個微小的多孔填料(約10kb):https://github.com/WICG/focus-visible 2.在css中的某處添加下一段代碼:

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

瀏覽器對css4選擇器的支持:焦點可見現在非常弱: https://caniuse.com/#search=focus-visible

如果您想刪除輸入中的相同效果，您可以添加以下代碼以及按鈕。

input:focus {outline:0;}

簡單寫提綱:無；。不需要使用偽元素焦點

好吧，盡管可能永遠不會有人看到這一點，因為已經有太多的答案了，我想在2020年提供更多的js解決方案，有很多:

outline.js或者outliner.js這兩個庫解決了我們都有的問題:刪除鼠標的輪廓，但保留鍵盤功能或可訪問性。

因此，與其決定風格和易用性哪個更重要，不如兩者都選！

使用下面的脈輪UI代碼，

:focus {
  box-shadow: none !important;
}

*[data-focus] {
  box-shadow: none !important;
}`

這是Chrome家族的一個問題，并且一直存在。

出現了一個錯誤，https://bugs.chromium.org/p/chromium/issues/detail? id = 904208

這里可以展示一下:https://codepen.io/anon/pen/ Jedvwj只要你給任何類似按鈕的東西添加一個邊框(比如說role="button "已經被添加到一個標簽上)，Chrome就會出錯，并且在你用鼠標點擊的時候設置焦點狀態。

我強烈推薦使用這個補丁:https://github.com/wicg/focus-visible.

只需執行以下操作

npm install --save focus-visible

將腳本添加到您的html中:

<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>

或者如果使用webpack或類似的東西，導入到主條目文件中:

import 'focus-visible/dist/focus-visible.min';

然后把這個放到你的css文件中:

// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
  outline: magenta auto 5px;
}

您可以只設置:

button:focus {outline:0;}

但是如果你有大量的用戶，你會讓那些不能使用鼠標或者只想用鍵盤來提高速度的人處于不利地位。

要刪除點擊的藍色背景，我使用

button {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

感謝貢獻一個堆棧溢出的答案！

請務必回答問題。提供詳細信息并分享您的研究！但是要避免…

尋求幫助、澄清或回應其他答案。根據意見發表聲明；用參考資料或個人經歷來支持他們。要了解更多，請查看我們關于撰寫精彩答案的提示。