How can I remove the blue outline around a search button in Webflow?
TL;DR
- Add custom CSS in Page Settings > Footer Code to remove the focus outline:
```css
.w-search-button:focus {
outline: none;
box-shadow: none;
}
``` - In Webflow Designer, select the Search Button, modify the
:focusstate, and set Focus Outline to None. - Maintain accessibility by adding an alternative visual cue, such as a subtle background color change.
The blue outline around a search button in Webflow is caused by the browser’s default focus styling for accessibility. You can remove or modify this outline using CSS.
1. Add Custom CSS in Webflow
Go to Page Settings and scroll down to the Custom Code section.
In the Footer Code box, add the following CSS inside
<style>tags:```
```
This removes the blue outline when the button is focused.
2. Use Webflow Designer (If Custom Code Isn’t an Option)
- Select the Search Button in Webflow Designer.
- Go to the Selector panel and choose the
:focusstate. - Under Borders & Shadows, set None for the Focus Outline or remove any applied shadow.
3. Consider Accessibility
- If you remove the focus outline, consider adding a different visual cue (e.g., a subtle background change) to maintain keyboard accessibility:
``````
Summary
Removing the blue outline can be done via CSS (outline: none;) or through Webflow Designer by modifying the :focus state settings. Ensure accessibility is maintained with alternative focus indicators if needed.