0

I want to change the color of a link when a user focuses on it by navigation to it using the TAB key. that's the easy part, as it's done by this:

a:focus{ color: red; }

the problem is, the link is also colored red when activated, e.g: when a user clicks the "ENTER" key or the left mouse click.

How can I prevent this side effect and keep the coloring only when user focuses on the link using the "TAB" key ?

I tried this:

a:focus{ color: red; }
a:active{ color: blue; }

(blue is the default color) it didn't work, what happens is it first turned the link blue but then red in a slit second...

I need this done of every link on my site so I don't want to use any complicated javascript code to do this and hoping to do this in CSS only.

any suggestions ?

edit: I also tried this:

a:active:focus{ color: blue; }

in order to capture a state in which the element is focused AND active so I can override a "focus" CSS. it didn't work either.

3
  • 1
    You can't do this with CSS. You would need to use JavaScript to detect a click event and then change the color to blue. You can fake it in some browsers by making a:visited the same color as a:active, but not all.
    – TylerH
    Aug 6, 2015 at 15:30
  • some browsers is better than none. can you please give an example code of faking it with a:visited and a:active ? do you mean this: a:focus{ color: red; } a:active{ color: blue; } a:visited{ color: blue; }
    – john_black
    Aug 6, 2015 at 16:08
  • Yes. It'll work in Firefox and maybe IE11, but not in Chrome.
    – TylerH
    Aug 6, 2015 at 16:19
1

The problem is the order of the rules.

a:link
a:visited
a:hover
a:active
a:focus

Focus has to be the last. I tried and it works well.

0

Try using :visited pseudo class

a:visited{color:blue;}
1
  • didn't work either. the behavior is the same as a:active it blinks blue then goes red
    – john_black
    Aug 6, 2015 at 15:50
0

I don't think you can do this in css only.

When you click a link, you give it focus.

You could try a little jquery routine to give all of your links a click handler which immediately blurs the focus away?

$(function () {
    $('a').on('click', function() {
        this.blur();
    });
})

jsfiddle: https://jsfiddle.net/6sujjuvn/

In the fiddle, you can see that after it spawns the new tab/window, your clicked link back on the jsfiddle page no longer has focus

2
  • thanks but when it comes to functionality I actually DO need the focus to stay on the link when clicked/activated...
    – john_black
    Aug 6, 2015 at 15:44
  • In that case it will remain focused and show the :focus color that you have set... Aug 6, 2015 at 15:45
-1

Have you tried:

a:active{ color: default; }
2
  • tried it now. doesn't work. by the way, I also tried: a:active{ color: inherit; }
    – john_black
    Aug 6, 2015 at 15:27
  • There is no default value for color property in CSS. Aug 6, 2015 at 16:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.