Webflow's form dropdown component (as will most other website builders) simply adopt the design of whatever browser it's currently being viewed on. You'll find on Chrome that this is less of an issue, but on Safari, the design is a lot more jarring.
You won't be able to customise this properly with only the built in Webflow settings, as this is controlled from the level of the browser. Because of this, if we want to have a consistent look and feel across your website, and therefor make the style fit in line with the rest of the form elements, we have to add custom code.
Why Form Dropdowns Look Different in Every Browser
A dropdown is made of two parts. The closed field you see on the page can be styled with Webflow's normal controls: border, background, padding, font and radius. The open list of options is different. It is drawn by the browser and the operating system, not by your page, so its colours, spacing, fonts and corners are decided by Chrome, Safari, Firefox or the mobile OS, not by your stylesheet. That is why a form that looks consistent in the Designer can look quite different for a visitor on a Mac, a Windows PC or an iPhone.
For most websites this is acceptable. For a brand-led site where the form is a key conversion point, a mismatched dropdown among carefully styled inputs is the kind of detail that makes the whole page feel unfinished.
Three Ways to Handle It
Leave the native dropdown alone. It is the most accessible and the most reliable option, especially on mobile, where the operating system shows its own touch-friendly picker. If your form is short and the dropdown is not central, this may be the right call.
Restyle only the closed field. Style the field with Webflow's controls, remove the default browser arrow with a small piece of custom CSS (setting the appearance to none), and draw your own arrow as a background image. The open list stays native, so you keep the accessibility and mobile behaviour, and the field matches the rest of the form.
Replace the dropdown with a custom one. This gives you full control over the open list as well, and it is what the rest of this guide covers.
If you are not sure, start with option 2 and only move to option 3 if the open list genuinely needs to match your brand.
Using jQuery Nice Select
Rather than try to figure everything out ourselves, we can use jQuery Nice Select, a lightweight code snippet that will enable us to fully customise the dropdown.
As we aren't going to add in the plug-in, we are instead going to add some custom code that does the same thing. You can either add this custom code to the page settings of the page you are adding the dropdown on, or to the project settings custom code tab if you are using it on many different pagers.
A few things to keep in mind before you paste it in. The script replaces every select element on the pages where it runs, so if you only want it on one form, add the code to that page's settings rather than site-wide. Custom code does not show in the Designer, so you will need to publish and check the live or staging page each time you change the styling. And because the custom dropdown replaces the native one, test it with a keyboard and on a phone before launch. If you want to go further with custom code, my roundup of 5 code snippets to add to your Webflow website has other useful ones.
Here's the javascript to enable the custom dropdown element. jQuery needs to be loaded before this runs, which it is on a standard Webflow site when you add the code to the "Before </body> tag" section:
Add these both to the "Before </body> tag" section.
Feel free to publish to your staging domain and see how the default custom style looks so you know what you are working with. You won't be able to see it update in the designer, so you will have to check the staging domain you're using each time you make an update.
Here is the dropdown on safari now:
Now it's looking more in-line with the rest of our form elements.
From here, you can update the styling in the custom css until it properly fits the rest of your form elements, giving you a more consistent and professional look no matter what browser your website visitors are using. There might be a little bit of trial and error through this process, but the main styles that you need to focus on are the colours.
Troubleshooting
The dropdown has not changed: check that you published, and that the code is in the "Before </body> tag" section of the page or project settings. Custom code never shows in the Designer.
The list is hidden behind other elements: raise the z-index of the dropdown, or check that a parent element does not have overflow hidden.
The first option disappears: the CSS above hides the first option so it can act as a placeholder. If your first option is a real choice, remove that rule.
Webflow form validation: test that a required dropdown still blocks submission when nothing is selected, and that the chosen value is sent in the form submission.
Accessibility: tab through the form with a keyboard and check each dropdown can be opened, navigated and selected without a mouse.
I'm a Webflow Premium Partner based in Wellington, New Zealand, with years of experience designing and developing websites for clients across the UK, EU, US, AU, and NZ. I specialize in Webflow migrations and SEO, helping businesses move from WordPress, Squarespace, and custom-coded sites to Webflow without losing search rankings. I share what I learn through in-depth guides and templates to help others get more out of Webflow.
