<p><strong>Click the buttons with a pointing device and focus them with the keyboard using the tab key.</strong></p>
<p>This is the default behavior in browsers without support for <code>:focus-visible</code>. The focus styles appear also on mouse click:</p>
<button>Without :focus-visible</button>
<p>In browsers with support for <code>:focus-visible</code>, focus styles will only be visible on keyboard focus – without the need for a polyfill! Other browsers still show the default <code>:focus</code> styles. Progressive enhancement at work. ;)</p>
<button class="with-focus-visible">With :focus-visible</button>
*, *::before, *::after {
box-sizing:border-box;
}
body {
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background-color: #e6e8ea;
margin: 0;
padding: 1rem;
}
button {
display: block;
margin: 0 0 1rem;
color: #fff;
background-color: #303753;
border: none;
font-size: 1.25rem;
padding: 1rem 1.5rem;
border-radius: 0.25em;
transition: background-color 0.14s ease;
cursor: pointer; // …or not? ;)
}
button:active {
transform: translateY(1px);
}
button:focus {
box-shadow: 0 0 0 3px #dc143f;
outline: 0;
}
button:hover {
background-color: #223b9c;
}
button.with-focus-visible:focus:not(:focus-visible) {
box-shadow: none;
outline: 0;
}
button.with-focus-visible:focus-visible, button.with-focus-visible:moz-focusring {
box-shadow: 0 0 0 3px #dc143f;
outline: 0;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.