How can I add keyboard only focus styling?
Question
I would like to add focus states for interactive elements on my website, however I don't want the styling I add to apply when clicking on elements. If I just use
:focus in my css I see the styles come through when clicking elements, or touching them on touchscreens. Is there a way I can style focus states just for keyboard navigation, when tabbing through the site? Answer
This is a fairly common technical requirement developers and designers run into once they are aware of the need for focus states on keyboard navigation. We'll often recommend a solution called what-input that is relatively popular, and robust. If you are looking for a smaller solution, or to create your own, you might find it helpful to reference this javascript solution one of our developers created before we came across what-input that illustrates another possible solution to the problem.
