Skip to content

Instantly share code, notes, and snippets.

@alastc

alastc/power-focus.css

Last active January 14, 2019 07:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alastc/dd2104fd8786c47a550dd9875bd4dc10 to your computer and use it in GitHub Desktop.
Save alastc/dd2104fd8786c47a550dd9875bd4dc10 to your computer and use it in GitHub Desktop.
Download ZIP
CSS for use in tools like Stylus to create an obvious focus indicator.
Raw
power-focus.css
/* CSS for use in tools like https://add0n.com/stylus.html to create an obvious focus indicator. */
*:-moz-focusring { /* change to :focus-visible for chrome */
outline: 2px transparent dashed !important;
box-shadow: 0 0 0 2px #F9F9D1, 0 0 0 4px #396196, 0 0 4px 8px #F9F9D1 !important;
transition: all 0.2s ease-in;
z-index: 1000;
overflow: visible;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment