How to Fix the Safari Dropdown Style Issue in Webflow Forms

If you use Webflow to build forms with a dropdown select list, although most people don’t notice this, but Safari adds its own style to it that replaces the design made in Webflow. This can be annoying and inconsistent with your website’s look and feel.

Fortunately, there is a simple solution to fix this issue. All you need to do is add some custom code to your website that overrides the default Safari style for the select element.

Here is the code you need to add:

<style>
select {
  -webkit-appearance: none;
  -moz-appearance: none;
}
</style>

This code tells Safari (and other browsers that use the -webkit- or -moz- prefixes) to not apply any special appearance to the select element, and instead use the default browser style or the style defined by Webflow.

The -webkit-appearance property is for browsers that use the WebKit engine, such as Safari and Chrome. The -moz-appearance property is for browsers that use the Gecko engine, such as Firefox.

To add this code to your website, follow these steps

1. Go to your Webflow project settings and click on the Custom Code tab.
2. Paste the code above in the Head Code section.
3. Save and publish your website.

Alternatively, you can also add the code to a page itself, or to a custom code embed on a page in the Webfllow designer.

That’s it! Now your dropdown select list should look exactly as you designed it in Webflow, regardless of whatever Safari does to it!

I hope this blog post was helpful for you. If you'd like to get more Webflow tips and tricks, consider signing up for our newsletter. We only send an email or two a month to make sure they have actual "value" in them!