When you navigate a website with your keyboard, browsers often create a default focus ring on interactive elements like links and buttons. But what if you want to customize the look of that focus ring? Until now, you haven’t been able to do this in Webflow without custom code.
But now you can, with two new options:
When used together, these two features allow you to better style a browser’s default focus ring to make it more noticeable, accessible, and inline with your site’s branding. Outline styling is called ‘outline’ in Webflow and is discoverable in the style panel under the effects section. Keyboard focus state is called ‘focused (keyboard)’ in Webflow and is discoverable in the style panel in the states dropdown menu.
For more in-depth information on these features, check out our Webflow University documentation for a closer look.
Outline styling and keyboard focus state allow you to add customizable outlines around an element for improved keyboard navigation without impacting the layout of your site.