How to use the focus state?

I thought that when clicking on a link, the settings defined in the focus state should appear.

What am I missing?

Focus is for “input focus”, it’s not at all related to clicks. A focussed element is ready to receive actions from the keyboard. Like when you go from a form element to another by pressing Tab.

Elements receiving focus vary from a browser to another but mainly are Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window.

Check my example here: http://sab.webflow.com/focus and once on the page press Tab multiple times.

(these are text fields with a custom font)

1 Like

Tab works but click also works because when you click, you bring the focus to the element.
See CSS :focus Selector >>> The :focus selector is allowed on elements that accept keyboard events or other user inputs.

Clicking on a link is a user input so why don’t I get the same behavior with links?

Hey all,

How do we keep the focused state on a font awesome text? I tried using a link text and changing the states for both the span and the link itself with no luck. Any ideas?