Hello,
It sounds like you’ve got a stubborn CSS issue on your hands! The CSS selector you’re using might not be specific enough, or it’s possible that there’s another rule with higher specificity that’s overriding your desired style.
Elementor widgets have their own specific class names. Let’s try to target your search bar specifically. You’ll first need to identify the class name or ID of your search widget. To do this:
Open your website, right click on the search bar, and choose “Inspect” from the context menu. This will open the developer tools in your browser with the HTML for your page.
Look for the search widget’s unique class name or ID in the HTML. It might look something like .elementor-search-form or #elementor-search-widget, but the actual class or ID will depend on your site.
Once you have the class name or ID, you can use it to make a more specific CSS rule. For instance, if the class name is .elementor-search-form, you could do:
.elementor-search-form input:focus {
outline: 2px solid #F99B9B !important;
}
Remember to replace .elementor-search-form with your actual class name or ID. This rule should apply your desired focus outline to the search bar when it’s focused.
Remember, if you are using an ID, you should use # instead of ., like #elementor-search-widget input:focus.
Also, while using !important can help to override other styles, it’s generally a good idea to use it sparingly. If you can get your style to apply without !important by using a more specific selector, that’s usually a better approach.
Best regards,
.elementor-search-form--skin-minimal:focus-within {
outline-width: 0 !important;
}
Define as Global Custom CSS.
