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.
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.
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.
Uday Tank is a serial entrepreneur and content marketing leader who serves the international community at Rankwisely. He enjoys writing, including marketing, productivity, business, health, diversity, and management.