Geek Answers Handbook

How to call: active pseudo-class on the keyboard 'enter' press? (using only CSS)

CSS:

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

Goal:

  • Keyboard tab to a link using the :focus style as a visual hint

  • They hit enter to activate the link; style :active gives visual feedback to the keys

Problem:

The :active style starts correctly for a mouse click, but not a keystroke. Can I only fix this with CSS?

+5
source share
3 answers

Good question!

Yes, you can no longer do this.

For a long time, MSIE viewed :active as :focus , so there was a way to do this with hyperlinks (this was before gigabit Internet speed and when browsers didn’t show -progress very well, except for the dumb waving flag or something else).

Run the snippet below to see the behavior in action:

  • input type='button' can be activated with ENTER or SPACE
  • While holding down SPACE the button will display the style :active (except for FireFox, it looks like an FF error, since it works fine for mousedown)
  • Holding down the ENTER button on the button will repeat onclick several times each time your keyboard sends a character.
  • Holding down the SPACE button on the button will cause onclick only if the SPACE key is released while it is focused on the button. (For example, you can simulate a mouse click on this path: tab on a button, hold down the key, then press the tab again and release it to cancel the click.)
  • Hyperlinks can only be activated with ENTER .
  • When you click on hyperlinks, the style will be displayed :active , 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 with JavaScript or a plugin like Flash / Silverlight for this.

+5
source

: The focus will consist of the user entering a keyboard into this element. Please note that tabs will cycle through the link tags on your page, so any css style should be applied with the a: focus selector.

: The state entered when the user presses the enter button on his keyboard will be active.

Here is a small snippet of an example of how to apply CSS to keyboard and mouse users:

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

You can absolutely use :focus to work with the keyboard, however active will be difficult.

:focus is applied when this element receives focus. For example, when a user clicks an input field with the mouse or selects this input field from a tab. Here is an example showing how the focus works; both with a tab and with a mouse. W3School Focus For More Information MDN: focus

However :active bit is different. it is applied on the timeline between the click of a mouse button and its release. This is difficult to achieve with the keyboard. Because there is no pressing and hold the enter key. When the user presses the enter button, a link will open. Here you can see an example of work :active . W3School Active For More Information MDN: Active

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

+1
source

More articles:


All Articles