< Back to Demos | Learn more at PaulJAdam.com >

Keyboard Focus Only

This demo uses JavaScript to check for keydown events and only show CSS keyboard focus outlines to keyboard users. This solves for a problem in Chrome where when you've set :focus outlines to all elements on the page and the user clicks on a checkbox, radio button, button, or link and then the keyboard focus outline displays.

Demo best viewed in Chrome to see the issues. When you click the checkbox, link, radio button, or button the focus outline will not display but when you tab to those controls there will be an outline.

The iframe demo at the bottom of the page will show you the problem in Chrome.

The css focus outline still remains visible in the text inputs and select controls. This idea was copied from Apple's website.

PaulJAdam.com

Normal Focus Visible Example in an Iframe