擺脫Chrome 自訂按鈕上煩人的藍色邊框
使用CSS 建立自訂樣式的按鈕時，遇到這樣的情況可能會令人沮喪在Chrome 中點擊它們時出現意外的藍色邊框。儘管將邊框設為“無”，但該輪廓仍然存在，可能會損害使用者體驗。
刪除此邊框的常見方法是使用「button:active {outline:none}」或「button:焦點{大綱：無}。」然而，這些可能並不總是有效。
建議的解決方案
雖然不建議消除瀏覽器邊框，因為它會破壞可訪問性，但這裡有一個解決方案，應該解決問題：
button:focus {
outline: 0;
}透過將焦點上的輪廓設為“0”，Chrome 將不再顯示藍色邊框，按預期保留自訂按鈕。
示範
查看此更新的 CSS 片段和 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.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;
}以上是如何刪除 Chrome 自訂按鈕中煩人的藍色邊框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
