Is there a way to style dropdown forms in Webflow? I have tried adding a class and styling as normal, but have only had minimal results.
TL;DR
- Use a native Select element in a Webflow form and apply styling like colors, padding, and borders via a class.
- To achieve advanced styling (e.g., custom arrow), either hide the native arrow with custom CSS or build a custom dropdown using the Dropdown component, divs, and interactions.
Yes, you can style dropdown forms in Webflow, but some elements (like the native select field) have limited styling options due to browser restrictions. Here's how to get the most out of styling dropdowns:
1. Use the Native Select Element in a Form
- Drag a Form Block from the Add panel.
- Inside the form, add a Select element (under Form Inputs).
- Give the Select element a class, such as
dropdown-select.
2. Style the Dropdown Container
- Select your
dropdown-selectclass. - You can control font size, background color, text color, padding, borders, and width.
- Webflow will apply these styles, but browsers still enforce default UI elements like the dropdown arrow.
3. Limitations of Native Styling
- The native dropdown arrow (visible on desktop) can't be easily styled cross-browser.
- Webflow and HTML in general don’t allow direct styling for the internal arrow on
<select>elements. - You may see different results across Chrome, Safari, and Firefox due to how each renders native form controls.
4. Workaround with a Custom Dropdown Component (Using Divs)
- Use Webflow’s built-in Dropdown component instead of the native Select field if deep customization is required.
- Build a custom dropdown using:
- A Dropdown Trigger styled like a form field.
- A Dropdown List with selectable Text Link or Button items.
- Use interactions to set the selected value and handle submission via hidden fields or custom logic.
5. Hide Native Arrow (Optionally)
- You can apply some style hacks to hide the native arrow by:
- Setting appearance: none in the Custom Code > Inside <style> tags section:
- Example:
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
- Example:
- Add a custom arrow icon using background images or pseudo-elements for better control, but this requires external styling with custom CSS.
6. Mobile Considerations
- Even with custom styling, mobile devices override styles for accessibility and UX.
- Always test dropdowns on multiple devices to ensure usability.
Summary
You can style native dropdowns in Webflow up to a point (e.g., padding, colors), but advanced styling like customizing the arrow requires workarounds or using a custom dropdown component instead. For full control, build your own dropdown using divs and interactions.
