How can we style the dropdown field in Webflow forms?
TL;DR
- Add a Select element inside a Form Block, then customize its style via the Style panel.
- To style the dropdown arrow or gain full control, use custom code or replace the Select with a custom-built dropdown using divs and interactions.
To style a dropdown field in Webflow forms, you need to customize both the default field and its opened menu. Webflow provides a "Select" form element that can be styled just like other form components.
1. Add the Dropdown Field
- Drag a Form Block from the Add panel to the canvas.
- Inside the form, drag a Select element (this is Webflow’s term for dropdowns).
- Add selectable options by clicking the dropdown and selecting Settings > Option Settings in the right panel.
2. Style the Select Element
- Select the dropdown on the canvas.
- Go to the Style panel to customize common CSS properties like:
- Font, font size, and color
- Background color
- Border styles (width, color, radius)
- Padding and margin
- Width and height
Webflow outputs the <select> HTML element, which is supported across browsers but has limited native styling—especially on Safari and Firefox.3. Style the Dropdown Arrow (Optional)
- The native dropdown icon varies by browser and can’t be directly styled or replaced in all cases.
- If you want full custom styling:
- Place a custom dropdown UI using interactions and div blocks (instead of the default Select element).
- Or, for minor changes, try removing the default arrow using
-webkit-appearance: none;in Custom Code (only available on paid plans or in the<head>/<style>tag).
4. Custom Dropdown (If Full Control Is Needed)
If you want complete control over the opened dropdown menu:
- Don’t use the default Select element.
- Instead, use a Dropdown element from the Add panel:
- Place a text field or div as the trigger.
- Create a dropdown list (ul) with styled list items (li).
- Use interactions to toggle visibility and set values.
This approach provides full styling flexibility, but you’ll need to use custom CMS logic or JavaScript (minimal) to submit selected values in a form.
Summary
To style Webflow’s dropdown field, use the Select element and style it in the Style panel like any input. For custom arrow or full design control, consider building a custom dropdown menu with divs and interactions.