Webflow sync, pageviews & more.
NEW

How can I remove the blue outline around a search button in Webflow?

TL;DR
  • Select the search button in Webflow, switch to the Focused state, and set Outline and Box Shadow to none.
  • Optionally, apply the same styles to the Focused Visible state and add a custom focus style to maintain accessibility.

The blue outline around a search button in Webflow usually appears due to the browser's default focus styles for accessibility when the button is clicked or navigated to with the keyboard.

1. Select the Search Button Element

  • Click on the Search Button in the Webflow Designer.
  • In the Selector Field, make sure you're editing the correct button class or element tag.

2. Remove Focus Outline Using Webflow Styles

  • Scroll to the States dropdown (normally set to "None") in the Style panel.
  • Choose the "Focused" state.
  • Under Style panel, go to the Effects section and set Outline: none.
  • Optional: Also set Box Shadow: none if there's shadow styling when focused.

3. Optionally Handle Outline in All Browsers

  • To ensure cross-browser consistency, also apply the same "Outline: none" and "Box Shadow: none" rules to the Focused Visible state, especially for buttons that may be clicked via keyboard navigation.

4. Maintain Accessibility

  • If you remove the outline, consider adding a custom focus style that’s still visible (e.g., a color change or underline) to preserve accessibility for keyboard users.

Summary

To remove the blue focus outline on a search button in Webflow, style the button's Focused state and set Outline: none. For best practice, replace it with a custom focus style that maintains accessibility.

Rate this answer

Other Webflow Questions