Skip to content

Instantly share code, notes, and snippets.

@ediblecode

ediblecode/focus-visible.css

Created February 3, 2021 16:06
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 ediblecode/8a08d2857b9f0bd4eae367e1e4a7762e to your computer and use it in GitHub Desktop.
Save ediblecode/8a08d2857b9f0bd4eae367e1e4a7762e to your computer and use it in GitHub Desktop.
Download ZIP
Progressively enhanced focus visible CSS
Raw
focus-visible.css
a,
button,
input {
&:focus {
/* More subtle style for older browsers */
outline: 1px dashed black;
}
&:focus:not(:focus-visible) {
outline: none;
}
&:focus-visible {
outline: 4px dashed #fd0;
outline-offset: 2px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment