Copy the Browser’s Native Focus Styles
Remy documented this the other day. Firefox supports a Highlight
keyword and both Chrome and Safari support a -webkit-focus-ring-color
keyword. So if you, for example, have removed focus from something and want to put it back in the same style as the browser default, or want to apply a focus style to an element when it isn’t directly in focus itself, this can be useful.
For example:
button:focus + span {
outline: 5px auto Highlight;
outline: 5px auto -webkit-focus-ring-color;
}
Looks good to me. It’s especially helpful with the sorta weird new Chrome double-outline style that would be slightly tricky to replicate otherwise.
The post Copy the Browser’s Native Focus Styles appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.