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

To remove the blue outline around a search button in Webflow, you can utilize CSS to style the button's focus state. By default, the blue outline is visible when the button is in focus, indicating that it can be interacted with using the keyboard. Here are two methods you can use to remove the blue outline:

1. Using the `outline` property:
Add custom CSS code to your Webflow project to override the default focus outline. First, make sure your search button has a unique class name or ID assigned to it. Then, go to the Custom Code section of your Webflow project settings and add the following CSS:

```css
.your-button-class:focus {
outline: none;
}
```

Replace `.your-button-class` with the class or ID name of your search button. By setting `outline: none;` on the button's focus state, you effectively remove the blue outline.

Note: It's important to remember that removing the focus outline may impact accessibility, as it makes it harder for keyboard navigation users to identify interactive elements. Make sure to provide alternative visual cues or indicators for users who rely on keyboard navigation.

2. Using a pseudo-class:
Another approach is to use a pseudo-class called `:focus-visible`, which provides a more accessible solution. This pseudo-class only applies the outline style on keyboard focus, ensuring that only users navigating via keyboard will see the blue outline. To implement this approach, follow these steps:

1. Assign a unique class or ID to your search button.
2. Go to the Custom Code section of your Webflow project settings.
3. Add the following CSS:

```css
.your-button-class:focus:not(:focus-visible) {
outline: none;
}
```

Replace `.your-button-class` with the appropriate class or ID name for your search button. This CSS code specifically targets the button when it's in focus but not using the `:focus-visible` pseudo-class, allowing you to remove the outline only for keyboard users.

Implementing the `:focus-visible` approach helps maintain accessibility for users while still giving you control over the button's appearance on focus.

Remember to publish your project for the changes to take effect.