Remove default focus outline but keep visible focus for keyboard users. Accessibility-friendly.
/* Remove default outline, show only for keyboard focus */
:focus {
outline: none;
}
:focus-visible {
outline: 2px solid var(--focus-color, #00d9ff);
outline-offset: 2px;
}
/* Or with ring (Tailwind-style) */
:focus {
outline: none;
}
:focus-visible {
box-shadow: 0 0 0 2px white, 0 0 0 4px #00d9ff;
}focus-visible fires for keyboard focus, not mouse clicks. Removes the outline on click while keeping it for accessibility.
Use in a global CSS file or :where(button:focus) etc. to scope. Use a theme color for --focus-color.
:focus-visible { outline: 2px solid cyan; outline-offset: 2px; }