HTML button becomes "selected" with little blue outline after it is clicked which is not needed to be

Question

Here is what happening. I have a simple button in HTML with a simple action in JS.

Button in HTML:

<button class="btn_open_calc">Open Culculator</button>

Styles in CSS:

.btn_open_calc {
  background-color: rgb(232, 209, 237);
  width: 200px;
  height: 40px;
  border-radius: 10px;
  font-size: medium;
}

Response in main.js:

var btn_Open_Calc = document.querySelector('.btn_open_calc');
btn_Open_Calc.addEventListener("click", funcOpenCalc);

function funcOpenCalc() {
  Modal_Container.style.display = 'flex';
}

But when I press the button here is how it starts to look: enter image description here

When I press on any other place it disappears. But I want to get rid of it at all so it won't appear.

The focus marker is important. Not everybody chooses to or is capable of using a pointing device to interact with a document. — Quentin, May 20 '20 at 12:31
@Quentin It's not simple focus outline? (solve with `outline:none;` on focus css) — Simone Rossaini, May 20 '20 at 12:32
@SimoneRossaini — It **is** the focus marker. Getting rid of it harms accessibility. Don't do that. — Quentin, May 20 '20 at 12:34
Oh ok, and is possible so change 'color' to trasparency? so as not to remove it but simply hide it? — Simone Rossaini, May 20 '20 at 12:35
@SimoneRossaini — Making it invisible will cause the same accessibility problems that removing it will. People have to be able to see it in order to know where it is! — Quentin, May 20 '20 at 12:36
Maybe leave the focus indicator, and fix the spelling of “Culculator” instead. — CBroe, May 20 '20 at 12:38

naveen · Accepted Answer · 2020-05-20T13:04:45.973

3

Add outline: none; or outline: 0;(outline 0 vs none difference) to the button's css to remove the outline.

But as MDN notes,

Accessibility concerns

Assigning outline a value of 0 or none will remove the browser's default focus style. If an element can be interacted with, it must have a visible focus indicator. Provide obvious focus styling if the default focus style is removed.

edited May 20 '20 at 13:04

answered May 20 '20 at 12:40

naveen

53,448
46
161
251

1

Sure, I just wanted to let others know that I'm not trippin' :D – Robo Robok May 20 '20 at 13:09

score 0 · Answer 2 · answered May 20 '20 at 12:39

0

You can add this to your CSS to get rid of it if you really want.

button:focus {
  outline: none;
}

example:

var btn_Open_Calc = document.querySelector('.btn_open_calc'); 
btn_Open_Calc.addEventListener("click", funcOpenCalc); 
function funcOpenCalc(){ 
Modal_Container.style.display = 'flex'; 
}

.btn_open_calc{ 
background-color: rgb(232, 209, 237); 
width: 200px; height: 40px; 
border-radius: 10px; 
font-size: medium; 
}

button:focus {
  outline: none;
}

<button  class="btn_open_calc">Open Culculator</button>

answered May 20 '20 at 12:39

John

5,132
1
6
17

1

Everything under your CSS in redundant. The simple answer is: `outline: none`. – Robo Robok May 20 '20 at 12:40
Which is exactly why I said "example" afterwords in which I used OP's code to show it works with what he wants. – John May 20 '20 at 12:42
Why would you post a full-blown example including JS to explain the CSS? – Robo Robok May 20 '20 at 12:42
Because it is exactly what the OP posted as his code and I'm showing him it working in his environment. – John May 20 '20 at 12:43
Thank you for you answer. If I could accept both yours and upper answer I would have done it. But I can't. So many thanks and good luck. – Ivan Savchenco May 20 '20 at 13:14

HTML button becomes "selected" with little blue outline after it is clicked which is not needed to be

2 Answers2

Accessibility concerns