'Remove blue outline on links when clicking, but keep the outline for TAB selection (accessibility)

I have a Burger Menu Button which is selectable via TAB. When I click on it and the menu opens up the burger has this blue outline to make it clear that it is focused. I don't want to remove that blue outline, because it helps vision impaired people and for tab selection it is also great, but is there a smart way to remove the blue outline only when someone clicks on it via mouse. Just asthetics...

Thanks for your answer.

cheers

cssfocusaccessibilityselectionoutline


Solution 1:[1]

As you pointed out, the blue outline is here for accessibility reasons.

If you click on the element, the keyboard focus will also move to that element.

So users have to know that the keyboard focus has been moved to that element.

Some people with disabilities may want to jump to a particular tab using the mouse, but then use their keyboard for easiness reasons.

Solution 2:[2]

js:

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

css:

.mouse{
  outline: none;
}

Solution 3:[3]

If I understood correctly the question, try:

.myButton:active {outline: none;}

Solution 4:[4]

Here's a simple solution, in plain Javascript, that works back to IE 10.

This answer is similar to @kuba's answer. Add/remove a class using JS to detect a mouse click or a tab button press.

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');
  }
});

Then turn off outline on :focus when the clicking class exists

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's good starting point.
*/

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

Browser Compatibility:

querySelector IE 8+
element.classList IE 10+

jQuery 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');
  }
});

Solution 5:[5]

Well you may want to do it this way:

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

and maybe:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Adam
Solution 2 Kuba Wojtach
Solution 3
Solution 4
Solution 5 Beni Sinca

Related Questions