Skip to content

Instantly share code, notes, and snippets.

@steroyle
Created June 29, 2023 10:09
Show Gist options
  • Save steroyle/d6137f11a752349b91012700b41c7e64 to your computer and use it in GitHub Desktop.
Save steroyle/d6137f11a752349b91012700b41c7e64 to your computer and use it in GitHub Desktop.
Multi outline focus state using box-shadow
// Using two contrasting box-shadow colours means it doesn't matter what background colour the element is over.
&:focus {
outline: transparent;
box-shadow: 0 0 0 2px black, /* inner colour here */
0 0 0 4px white; /* outer colour here */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment