HTML, CSS, CSS Variables and Flexbox and Javascript

Solution retrospective
I added a border to show keyboard focus on the toggle. It shows up when you click on it, and shows until you click away. If anyone has another way to do this I would appreciate the help.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @AlexKMarshall
If you use
:focus-visible
and add an outline there, then it will only show when a user interacts with your button with the keyboard, and not with a mouse.If you use outline rather than border than you won't get layout shifts either, as outline isn't calculated in the element size so the size won't change when it's added and removed
Marked as helpful - @AgataLiberska
Hi David, I'm not sure there is another way - the border is there because the input is still in focus. I guess in theory, you could remove it with JS? But that would be messing with behaviour that users expect when browsing so it's not a good idea. What you could do is make the focus styles go with the design more. You can use box shadows for example to have a white ring around the toggle (check out how bootstrap does their focus styles, I think it's quite nice - note that you don't need to include bootstrap here, just check out their styling).
Hope this helps :)
Marked as helpful
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord