加载或单击时如何从 HTML 元素 'button' 和 '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?

，但仍要向用户显示按钮已成功单击

悬停

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{ 大纲：无； }