Recently, we have just updated our Elementor Pro to the latest version (3.15). Everything was good at first, until we found a little issue on the Search Form widget. An annoying box showed up every time we typed something on the search box. To make it clear, take a look at the following GIF.
Strangely, the box only showed up when you set the search form skin to Minimal. It didn’t show up on both the Classic skin and Full Screen skin. While it doesn’t affect the functionality of the search, it’s aesthetically annoying. After all, Elementor is a tool to create a website that aesthetically good. Isn’t it?
If you also experience the same issue after updating your Elementor Pro, you can use the following CSS snippet to fix it.
.elementor-search-form--skin-minimal:focus-within {
outline-width: 0px;
outline-style: solid;
}
You can place the above snippet to the Custom CSS block on Elementor Site Settings. To do so, click the hamburger icon at the top-left corner inside the Elementor editor and select Site Settings.
Scroll down until you find the Custom CSS block then click it.
Paste the CSS snippet to the available field and click the Update button at the bottom.
That’s it. You should no longer see the annoying box.
If the box persists after you add the CSS snippet, try to clean up the cache on your web hosting service and open your website on the private/incognito mode. On some Elementor hosting services, cleaning up the server cache is required in order to make the minor changes apply.
The Bottom Line
No product is perfect. We still recommend you update Elementor on a regular basis as a new version commonly comes with bug fixes and security patches. Just make sure to backup your website first before you make an update. You can easily restore the previous version of your website in case the update causes an issue.
