DEV Community

Discussion on: Stop Removing Focus

Collapse
 
garybyrne profile image
Gary Byrne

"box-shadow is a versatile property which web developers can use to achieve various different glow and nested border effects. However, this property is reverted in forced color modes. If you use box-shadow to denote state this state information will be lost in forced color modes unless you plan accordingly." -blogs.windows.com/msedgedev/2020/0...

Thread Thread
 
grahamthedev profile image
GrahamTheDev

Hence why the “few hoops”, this certainly isn’t a full tutorial, however the trick is that you set a transparent outline and a couple of media queries so that when the box shadow is deactivated by high contrast (for example) a standard outline is show. Maybe I should do a full article at some point.

Thanks for sharing, I really should have made that more clear that you can’t just rely on shadows!