How to trigger the :active pseudoclass on keyboard

Question

The CSS:

a:focus  { opacity: .75 }
a:active { transform: translateY(4px) }

The intent:

1. Keyboard users tab to the link, using the :focus style as a visual cue

2. They hit enter to activate the link; the :active style gives visual keypress feedback

The problem:

The :active style triggers properly for a mouse click, but not a keypress. Can I fix this with just CSS?

Answer 1

Good question!

Yeah, you can't do this anymore.

A long time ago MSIE treated :active like :focus so there was sort of a way to accomplish this with hyperlinks (this was before gigabit internet speeds and when browsers didn't do a good job of showing load-in-progress except for a dumb waving flag or something).

Run the below Snippet to see the behavior in action:

• input type='button' can be activated with ENTER or SPACE
• Holding down SPACE on a button will show the :active style (except for FireFox; this looks like FF bug since it works OK for mousedown)
• Holding down ENTER on a button will repeatedly trigger onclick every time your keyboard sends the character.
• Holding down SPACE on a button will trigger onclick only if the SPACE key is released while still focused on the button. (For example, you can simulate mouse click this way: tab to a button, hold down space, then hit tab again and release it to cancel the click.)
• Hyperlinks can be activated with ENTER only.
• Clicking on hyperlinks will show :active style, using ENTER (or touch) will not.

document.getElementById('t1').focus(); // set focus for easier demo	

:active
{
   color: Red;
}             

<input type='text' id='t1' value='Set focus and hit tab'/>
<a href='javascript:;' onclick='console.log("Hyperlink")'>Hyperlink</a>
<input type='button' value='Button' onclick='console.log("Button")'/>

So you are stuck using JavaScript or a plugin like Flash / Silverlight for this.

Answer 2

:focus will be the state entered when the keyboard user tabs to that element. Note that tabbing will cycle through the link tags on your page, so any css styling must be applied with the selector a:focus.

:active will be the state entered when the user hits the enter button on their keyboard.

Here's a little snippet of an example of how to apply css for both keyboard and mouse users:

a:hover .class,
a:focus .class { 
  background-color: rgba(243,113,89, 0.95); 
}

Answer 3

You can absolutely get :focus to work with keyboard, however active would be bit difficult.

:focus is applied when that element receives focus. Like, when user clicks an input field by mouse or selects that input field by tab. Here is an example that shows how focus work; both with tab and mouse. W3School Focus For more info MDN :focus

However :active is bit different. it gets applied in the timeline between user clicking the mouse button and releasing it. This is hard to achieve using keyboard. Because there is no press and hold for enter key. The moment user presses the enter button, link will open up. Here you can see the example on how :active works. W3School Active For more info MDN :active

If you are going to use the pseudo-classes for links, then I would suggest using :focus, it will do the trick for both mouse and tab key.