加載或單擊時如何從 HTML 元素“按鈕”和“img”中刪除輪廓？

Question

在加載我的頁面或單擊按鈕時，由於某種原因 html 為按鈕應用了一些邊框。

<div class="like-dislike">
<button class="button-like-dislike" id="likebtn24">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
</button>
<input class="input-like-dislike" id="likeinput24" value="0" name="">
<button class="button-like-dislike" id="dislikebtn24">
<i class="fa fa-thumbs-down" aria-hidden="true"></i>
</button>
<input class="input-like-dislike" id="dislikeinput24" value="0" name="">
</div>

Answer 1

您應該能夠通過在 CSS 內將輪廓設置為“無”來防止這種情況。

大綱

button {
     outline: none;
}

請記住仍然向用戶顯示按鈕已成功單擊，但使用：hover 或：active

HOVER

button:hover {
     /*CSS*/
}

積極的

button:active {
     /*CSS*/
}

Answer 2

看看刪除輪廓是否可以修復它。 雖然，您可能需要某種方式來指示按鈕被選中/突出顯示以實現可訪問性目的，例如顏色的輕微變化。

button:focus, button:hover{
    outline: none;      
}

Answer 3

試試這個，如果它對你有用，

.button-like-dislike:hover , .button-like-dislike:focus , .button-like-dislike:active {
    outline: none;
}

Answer 4

按鈕button className {大綱：無； }