How to remove an outline from HTML elements 'button' and 'img' when onload or clicked?

user_14199636 0
Viewed 71

On load my page or click the button, for some reason html applies some border to the button.

enter image description here

<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>
button css image html javascript
4 Answers

You should be able to prevent that by setting the outline to 'none' inside the CSS.

OUTLINE

button {
     outline: none;
}

Remember to still show the user that the button has successfully been clicked though with :hover or :active

HOVER

button:hover {
     /*CSS*/
}

ACTIVE

button:active {
     /*CSS*/
}
user_147252770

See if removing the outline fixes it. Although, you'll likely want some sort of way to indicate the button is selected/ highlighted for accessibility purposes, such as a slight change in color.

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

Try this if its work for you,

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

button button className{ outline: none; }

user_153603990
Related