How to remove the outline border from a button when this one was clicked?

Question

I'm making an HTML5 game, and I have a reset button. whenever the button is clicked, it gets a black outline around the outside next time a button is pressed. is there an attribute or something I can use to prevent this?

<button id="reset" onclick="reset()">Reset</button>

This is what I'm using for my button. I don't know if it's something in the HTML or CSS. I tried going into CSS and adding user-select: none; but I think that's for radio buttons

are you trying to remove onfocus outline? – Brijesh Kalkani Jul 16 '21 at 04:32 — Brijesh Kalkani, Jul 16 '21 at 04:32

score 0 · Answer 1 · answered Jul 16 '21 at 04:32

0

button, button:hover, button:active, button:focus {
  outline: 0;
}

answered Jul 16 '21 at 04:32

Shuvo

1,253
9
18

score 0 · Answer 2 · answered Jul 16 '21 at 04:34

0

It must be outline, set outline: none; it should solve your problem.

answered Jul 16 '21 at 04:34

Charan Kumar

553
2
13

score 0 · Answer 3 · answered Jul 16 '21 at 04:41

I guess I get what you're asking; probably duplicated at here

The following can work for your case:

<button class="btn" onclick="this.blur();">

Using the following style (remember that this style isn't recommended when we have accessibility in mind):

.btn:focus {
  outline: none;
  box-shadow: none;
}

See the answer at here; try to elaborate better your questions the next time, best regards; bye

How to remove the outline border from a button when this one was clicked?

3 Answers3