I am attempting to selectively apply an outline on an input field only when the user has navigated to the element by keyboard. From my understanding the way to do this is removing the outline on focus but applying on focus-visible like so:
input:focus {
outline: 2px solid transparent;
}
input:focus-visible {
outline: 2px solid;
}
<input type="text">
However from what I can tell an input element registers a click and keyboard selection equally. I would like to override this somehow. I am using Chrome but have tested with Safari as well.
Thanks in advance for your help!