Remove the blue link outline when clicked, but keep the TAB allocation scheme (accessibility)

Question

I have a Burger menu button that is selectable via TAB. When I click on it and the menu opens, the hamburger has this blue outline so that it is clear that it is focused. I don’t want to remove this blue outline, because it helps people with visual impairments, and it’s fine to select tabs, but is there any reasonable way to remove the blue outline only when someone clicks on it with the mouse. Just aesthetics ...

Thanks for your reply.

amuses

Answer 1

Js

$('#element').click(function(){
   $(this).addClass('mouse');
});
$('#element').blur(function(){
  if($(this).hasClass('mouse'){
     $(this).removeClass('mouse');
  }
});

CSS

.mouse{
  outline: none;
}

Answer 2

, .

, .

, , .

, .

Answer 3

, :

.myButton:active {outline: none;}

Answer 4

Javascript, IE 10.

@kuba. / JS, .

JavaScript:

var htmlElement = document.querySelector('html');

document.addEventListener('click', function(){
  htmlElement.classList.add('clicking');
});

document.addEventListener('keyup', function(e){
  if (e.keyCode === 9) {
    htmlElement.classList.remove('clicking');
  }
});

: ,

CSS

html.clicking .targetElement:focus {
   outline: none;
}

/* 
  or you can try dealing with all visibly focusable elements from the start.  I'm not sure if this is all of them, but it good starting point.
*/

html.clicking a:focus,
html.clicking button:focus,
html.clicking input:focus,
html.clicking textarea:focus {
  outline: none;
}

:

querySelector IE 8+
element.classList IE 10 +

jQuery is an alternative if you need to support browsers older than IE10.

$(document).on('click', function(){
  $('html').addClass('clicking');
});

$(document).on('keyup', function(){
  if (e.keyCode === 9) {
    $('html').removeClass('clicking');
  }
});

Answer 5

Well, you can do it like this:

div:active, div:focus{
  outline: none;
  border: none;
}

and, perhaps:

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}