JSFiddle - React, Tailwind, and code Playground

focus-visible test

by Travis Almand

HTML

<button class="focus-visible">button</button>

<input class="focus-visible" />

CSS

.focus-visible:focus {
  /* Provide a fallback style for browsers
     that don't support :focus-visible */
  outline: none;
  background: lightgrey;
}

.focus-visible:focus:not(:focus-visible) {
  /* Remove the focus indicator on mouse-focus for browsers
     that do support :focus-visible */
  background: transparent;
}

.focus-visible:focus-visible {
  /* Draw a very noticeable focus style for
     keyboard-focus on browsers that do support
     :focus-visible */
  outline: 4px dashed darkorange;
  background: transparent;
}