引導按鈕 - 在Chrome OS中刪除輪廓X

我期待實現這一目標： http://getbootstrap.com/javascript/#popovers-examples - 滾動到「現場演示」和打紅酥料餅按鈕，在Chrome OS X上....這是完美的美麗引導按鈕 - 在Chrome OS中刪除輪廓X

現在去這裏（問題兒童）：http://yoyo.io/javascript/#popovers - 它概述了藍色，aaaargh。

如果你檢查你會看到一堆CSS的努力從我這裏刪除！它在Safari和Firefox中看起來是正確的，但在Chrome中卻不行！

任何人 - 我忽略了什麼？

非常感謝提前！

來源

2014-01-18 user1583909

它沒有得到任何藍色的輪廓有 –

我看到.btn:focus上有一個outline：

.btn:focus { 
    outline: thin dotted; 
    outline: 5px auto -webkit-focus-ring-color; 
    outline-offset: -2px; 
}

試試這個更改爲：

.btn:focus { 
    outline: none; 
}

基本上找的outline任何情況下，對:focus版元素 - 這就是導致它。

來源

2014-01-18 06:58:57

輝煌我放在這個： .btn：懸停，.btn：重點{ 概述：無; text-decoration：none; } .btn { outline：none; text-decoration：none; } 這是否過於沉重？ – user1583909

+12

如果要在點擊過程中刪除輪廓，請嘗試以下操作： .btn：focus，.btn：active：focus，.btn.active：focus { \t outline：none; ！重要; \t outline-style：none; } – ira

任何人都知道他們爲什麼這麼做？ –

搜索和替換

outline: thin dotted; 
outline: 5px auto -webkit-focus-ring-color;

替換爲

outline: 0;

來源

2014-04-11 12:54:27

絕對不要替換本機Bootstrap文件中的任何內容。覆蓋它們並保留原始的原始文件，這使得CSS變得非常棒。我知道這個答案是舊的，但如果有人遇到這個問題，我想確保這個記錄。 – trnelson

對於像我這樣的Google的任何，在那裏..

.btn:focus { 
    outline: none; 
}

仍然沒有在谷歌Chrome瀏覽器，下面的應該完全消除任何按鈕發光。

.btn:focus,.btn:active:focus,.btn.active:focus, 
.btn.focus,.btn:active.focus,.btn.active.focus { 
    outline: none; 
}

來源

2015-01-28 15:42:39 shaneparsons

我只需要'''.btn：focus，.btn：active，.btn：active：focus'''，你的回答指向我正確的方向，所以謝謝！ –

您可能還想添加'box-shadow：none;' – Izhaki

這正是我需要的，謝謝。 –

.btn:focus, .btn:active:focus, .btn.active:focus{ 
    outline:none; 
    box-shadow:none; 
}

這應該刪除的輪廓和框陰影

來源

2015-04-07 06:08:58

這應該是可以接受的答案！ –

你可以把這個標籤到HTML中。

<button class='btn btn-primary' onfocus='this.blur'> 
    Button Text 
</button>

我焦點，因爲採用的onclick仍顯示爲一微秒的光芒，在使用它的條款作出了可怕的期待閃光。這似乎擺脫所有的CSS方法失敗後。

來源

2015-09-16 09:20:41

CSS從mixins文件夾中的這個文件「tab-focus.less」開始（可能很難找到，因爲mixin沒有顯示在chrome dev-tools中）。所以，你應該修改：

// WebKit-style focus 

.tab-focus() { 
     // Default 
     outline: thin dotted; 
     // WebKit 
     outline: 5px auto -webkit-focus-ring-color; 
     outline-offset: -2px; 
    }

來源

2015-12-18 11:32:58 Margarita

這將刪除它 - 短和清潔：

.btn { 
    outline: none !important; 
}

來源

2016-01-21 16:32:12 Entertain

.btn.active或.btn.focus單獨不能覆蓋引導的風格。對於默認主題：

.btn.active.focus, .btn.active:focus, 
.btn.focus, .btn:active.focus, 
.btn:active:focus, .btn:focus { 
     outline: none; 
}

來源

2016-02-06 15:21:41

在引導源薩斯文件的混入，刪除所有$border引用（而不是在輪廓變體）。

@mixin button-variant($color, $background, $border){ 
$active-background: darken($background, 10%); 
//$active-border: darken($border, 12%);  
    color: $color; 
    background-color: $background; 
    //border-color: $border; 
    @include box-shadow($btn-box-shadow); 
    [...] 
}

或者簡單的代碼你自己_customButton.scss mixin。

來源

2017-05-11 09:19:36 RizzCandy

在引導程序4中，輪廓不再使用，而是使用方塊陰影。如果這是你的情況下，只要做到以下幾點：

.btn:focus { 
    box-shadow: none; 
}

來源

2018-01-02 14:37:05

引導按鈕 - 在Chrome OS中刪除輪廓X

回答

相關問題