How can I remove the blue outline around a search button in Webflow?
TL;DR
- Select the search button in your Webflow project.
- Create a new combo class in the Selector Panel.
- Change the focus state's outline to none.
- Preview and publish changes to ensure the outline is removed.
If you are seeing a blue outline around a search button in Webflow, it typically indicates focus. Here’s how to remove it.
1. Select the Search Button
- Go to your Webflow project and locate the page containing the search button.
- Click on the search button to select it.
2. Access the Selector Panel
- In the Webflow Designer, look for the Selector Panel on the right sidebar.
- Create a new combo class if you haven’t already, so the style changes only apply to this button.
3. Style the Focus State
- Switch to the focus state by clicking on the states dropdown (default, hover, pressed, focused) at the top of the Selector Panel.
- Modify the outline property by setting it to none. Do this by entering
outline: none;in the additional CSS or by choosing the equivalent settings in the panel.
4. Test and Publish
- Preview the page by using the preview mode to ensure the outline no longer appears.
- Publish your changes to make sure they reflect on your live site.
Summary
To remove a blue outline from a search button in Webflow, select the element, customize the focus state, and set the outline to none. Review changes in preview mode before publishing.
