<p class="warning">🚨 Your browser does not support :focus-visible. Try in Chrome 86. 🚨</p>

<p>Click on the button using a mouse. Then try tabbing to the button.</p>
<button>Custom Button</button>
<p></p>
<input type="text" />

button {
  background-color: #c2185b;
  color: white;
  font-size: 1.5rem;
  border: none;
  border-radius: 1em;
  padding: .5em 1em;
}

/* Keyboard will use a large outline. */
button:focus-visible {
  outline: 4px dashed black;
}

/* Mouse/Touch will use a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}
input:focus-visible {
  outline: 4px dashed black;
}

/* Mouse/Touch will use a subtle drop shadow. */
input:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

/* Just used for feature detection. */
.warning {
  display: none;
  font-size: 24px;
  font-weight: bold;
}

// A little script to detect :focus-visible support.
// h/t to Noal Lawson for the original snippet!
// https://stackoverflow.com/a/61597966/1019180

function supports(selector) {
  const style = document.createElement('style');
  document.head.appendChild(style);
  try {
    style.sheet.insertRule(selector + '{}', 0)
  } catch (e) {
    return false
  } finally {
    document.head.removeChild(style)
  }
  return true
}

if (!supports(':focus-visible')) {
  document.querySelector('.warning').style.display = 'block';
}