Anchor tag has: focus style applied when clicked

Question

I am new to internet accessibility.

I applied the style for a:focuslike

a:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -1px;
}

It works fine when I press Tab to go through the anchor tag on the web page, the problem is that when I click the anchor tag, this focus style also applies, but I don't want to.

Is there any way to solve this problem?

Answer 1

What I did in the past for accessibility is when the tab was pressed to apply the css class to the body with javascript, for example .keyboard-active, and so that the focus style is applied only if this class is active.

.keyboard-active a:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -1px;
}

, , javascript .keyboard-active ( ).

, ADA.

sass ( , SO ), ada :

.keyboard-active {
    /* styles */
    a {
        /* styles */
        &:focus {
            outline: thin dotted;
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -1px;
        }
    }
}

Answer 2

, , CSS :active .

, CSS:

a:link { /* style rules for links in general */ }
a:visited { /* style rules for visited links */ }
a:hover { /* style rules for links on mouse hover */ }
a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -1px;
}
a:active { /* style rules for links that are being activated */ }

, a:focus:hover.

Link--Hover-Focus-Active , Eric Meyer ?.

. : hover,: active : focus W3C Selectors Level 3.