Search code examples
cssaccessibilityuiaccessibility

How to css target "Tab" state of the input?


I believe for accessibility cases, tab is used to navigate through different elements on the page, usually there is a dotted element around Tabbed element to indicate that it is in focus, I tried researching this, but didn't found a reference to a css rule that targets this state.


Solution

  • The css selector you want is :focus, like input:focus { ... } but not everything can be tabbed to like this. Things like anchors, inputs and buttons can be tabbed to in this way. I do not know any more off the top of my head but things like div, span, h1/2/3/4/5/6 cannot be tabbed to.

    Also to note, tabbing into an item is not the only way to bring it to focus. An anchor for example, you can hold left mouse button down over it and then move the cursor away before letting go. The item will be focused by doing this (it might aid your dev time if you want to style something near the end of the page.)