javascripthtmlcssless

Show element outline only on tab but not on click

If I go to the developer.mozilla.org and tab through the dropdowns I get elements with outline which is totally fine for accessibility:

enter image description here

But if I click on it, I dont get the outline:

enter image description here

I have tried achieving this by using only pseudoclass :focus, excluiding :active yet it still doesn't work:

a {
  color: @brand-link;

  &:focus:not(:active) {
    outline: -webkit-focus-ring-color auto 5px;
  }
  &:active {
    outline: none;
  }

}

Anyone knows how to achieve outline strictly only for tab navigation but not for clicked element?

I'm using less by the way.

Here an example, if you click on it it will outline it gold colored:

a:focus {
   outline: 4px solid gold;
}

a:active {
  outline: none;
}
<a href="/">FOO LINK</a>

I want gold color just visible on tab navigation but not when clicking the element

Solution

  • :active is the pseudo class that fires on click. 

    a:link:active{outline:10px dotted #000;}

    will show exactly this onclick. jsfiddle for you to see.
    Very informative post on differences between :hover, :active, and :focus.

    :link represents an element that has not yet been visited. reference

    EDIT:
    Solution is then: 

    a:focus:not(:link:active) {  
outline: -webkit-focus-ring-color auto 5px;  
}