如何隱藏按鈕輪廓

我有這個頁面有很多按鈕的位置：https://jsfiddle.net/Android272/c150305z/如何隱藏按鈕輪廓

我曾嘗試下面的代碼，但沒有的每個組合將擺脫輪廓。

*:focus, 
button, 
button:focus, 
button:active { 
    outline: 0; 
    outline-width: 0; 
    outline: none; 
    outline-style: none; 
}

來源

2015-04-05 Andrew Pullins

萬一你的意思是使用'邊境：none'？ – aug 2015-04-05 01:47:29

http://stackoverflow.com/a/19886893/383904 – 2015-04-05 02:00:29

請參閱下面的答案。有人說輪廓是問題，但顯然不是因爲你重寫了輪廓屬性。這絕對是由twitter引導應用的1px邊框。 – 2015-04-05 02:06:56

理論上，可以這樣寫：

button { 
    outline: none; 
}

這將刪除選擇邊界一個按鈕。但是，在這種情況下，我們需要在outline屬性上使用!important以防止Bootstrap覆蓋它（如下所示）。我還建議使用Chrome和Firefox爲known bug添加跨瀏覽器支持。

button { 
    outline: none !important; 
} 

input[type="button"]::-moz-focus-inner { 
    border: 0; 
}

或者，Bootstrap將這些樣式與焦點按鈕相關聯，您需要刪除或覆蓋。

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

使用此覆蓋它：

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

來源

2015-04-05 01:58:26 partypete25

你的HTML使用Twitter的引導的btn和btn-primary clasess

<button type="button" class="btn btn-primary circle"...></button>

這是這些類做：

.btn{ 
    border: 1px solid transparent; 
} 

.btn-primary { 
     color: #fff; 
     background-color: #337ab7; 
     border-color: #2e6da4; 
}

因此，使用border: none;和惱人的藍色邊框將消失！

https://jsfiddle.net/c150305z/16/

來源

2015-04-05 01:48:09

更新您的提琴在這裏： Working Fiddle

只是這一行： button { outline: none !important; }

來源

2015-04-05 01:51:24 Harko

如何隱藏按鈕輪廓

回答

相關問題