Skip to content

Instantly share code, notes, and snippets.

@elfacht

elfacht/focus-visible.css

Created January 5, 2022 11:02
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 elfacht/040c656af564a05f94ca19de5e40d097 to your computer and use it in GitHub Desktop.
Save elfacht/040c656af564a05f94ca19de5e40d097 to your computer and use it in GitHub Desktop.
Download ZIP
:focus-visible
Raw
focus-visible.css
/* @source https://css-tricks.com/the-focus-visible-trick/ */
/* Focusing the button with a keyboard will show a dashed black line. */
button:focus-visible {
outline: 4px dashed black;
}
/* Focusing the button with a mouse, touch, or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
outline: none;
box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment