Visible keyboard focus

Show a clear focus ring for keyboard users without showing it on mouse clicks.

css beginner #accessibility#focus
プレイグラウンドで開く
css-focus-visible.css
:where(a, button, input, select, textarea):focus { outline: none; }
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #2f6bff;
  outline-offset: 2px;
  border-radius: 6px;
}