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.
- 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.