A front-end developer from Mar del Plata, Argentina. Passionate about CSS, accessibility, and JS. Currently working on "just a small fix", as I've been doing for the last 15 years.
outline: none gets rid of the visual indication of focus, which would be terrible for keyboard navigation users, as they would have no indication of where they're positioned at.
The rule of thumb is "never use outline: none", so the browser's default focus states stays active. But we can use outline: none if we replace it with something else.
For instance, outlines are always square, which can look awful in buttons with rounded corners. So we can style our buttons' focus state with outline: none, providing an alternate indication such as a solid box-shadow instead. That way our focus indicator would follow the button's rounded corners.
outline: none
gets rid of the visual indication of focus, which would be terrible for keyboard navigation users, as they would have no indication of where they're positioned at.The rule of thumb is "never use
outline: none
", so the browser's default focus states stays active. But we can useoutline: none
if we replace it with something else.For instance, outlines are always square, which can look awful in buttons with rounded corners. So we can style our buttons' focus state with
outline: none
, providing an alternate indication such as a solid box-shadow instead. That way our focus indicator would follow the button's rounded corners.Here's a great video about that:
youtube.com/watch?v=Mvu5OMGcdVA
Understood. Thanks for resource sharing
Facundo Corradini.