:focus-visible test

by Laurens Maneschijn

HTML

test <code>:focus</code> vs <code>:focus-visible</code>
<hr>
<form>
  form

  <span tabindex="0">span</span>
  <span tabindex="1">span</span>
  <a href="#1">a 1</a>
  <a href="#2">a 2</a>
  <a href="#3"><img src=""></a>

  <select>
    <option>a</option>
    <option>b</option>
  </select>

  <input type="text">
  <input type="number">
  <input type="time">
  <input type="date">
  <input type="datetime">
  <input type="range">

  <input type="reset">
  <input type="submit">

  <button type="button">button</button>

</form>

CSS

*:focus {
  border: 1px solid #f00;
						/*
  margin: -1px;
  background: #f008;
*/
}

*:focus-visible {
  outline: 1px dashed #00f;
}

JavaScript

document.querySelectorAll('form').forEach((el) => {el.onsubmit = (e) => {e.preventDefault(); return false;};});