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)
CodePudding user response:
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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>