KP-C

Kevin Powell - Community•2y ago•

21 replies

Snap Riley

Using visibility and :focus to cause an HTML element to lose focus

I'm experimenting with preventing DOM elements (specifically input/textarea/button/a HTML elements) from getting focus. After some playtime, I stumbled on a strange and unique solution.

element:focus {
visibility: hidden;
}

This causes the element to be hidden and therefore lose focus.
In turn, the lose of focus causes the element to become visible again.

I'm looking for comments on this technique since the lost focus at best feels like a side effect and a hack at worst.

https://codepen.io/Snap-Riley/pen/NWmJMPR

CodePenSnap Riley

Using visibility and :focus to cause an HTML element to lose focus

This pen is the result of an experiment with focus on HTML elements. The pen shows how focus is lost when a user tries to use mouse or keyboard to get ...