Remove outline only on click event

I would like to remove the focusable HTML tags’ outline only when focus is triggered by a click event. This means I would like to keep outline for tabbing.

Does anyone know a practice or library I could use here?

If not, my idea is attaching an event listener to window that listens to click events and is nullifying target style outline on focus in the global styled component.

Is that a viable solution?

(Using React)

Answer

You don’t need a library or JavaScript to do this. CSS has you covered. Use the focus-visible pseudo selector to help you out.

*:focus-visible {
    outline: 3px dashed rebeccapurple;
    outline-offset: 3px;
}

<button>Click me to see no focus but tab to me and you will see my focus</button>
<br>
<button>Click me to see no focus but tab to me and you will see my focus</button>

Advertisement

Answer