<input placeholder="default" />
<button>default</button>
<br />
<br />
<input class="f" placeholder=":focus" />
<button class="f">:focus</button>
<br />
<br />
<input class="fv" placeholder=":focus-visible" />
<button class="fv">:focus-visible</button>  
.f:focus {
  outline: 3px dashed red;
}

.fv:focus-visible {
  outline: 3px dashed rebeccapurple;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.