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
- Style basic dropdowns in Webflow by adding classes and editing properties like background, border, and font.
- For advanced styling, use custom code with libraries like Choices.js or simulate dropdowns using divs and interactions with custom JavaScript for value handling.
Styling a dropdown form field in Webflow can be tricky because of browser-specific default styles. While Webflow allows basic styling, more advanced control requires a few workarounds.
1. Use Combo Classes on the Dropdown Field
- Select the Dropdown (Select) element, not the entire form.
- Add a class to the dropdown field element.
- Style attributes like background color, border, padding, and font generally work.
- Use combo classes to style variations (e.g.,
Dropdown Default,Dropdown Focused).
2. Style the Option Elements (Limitations)
- Webflow doesn’t fully expose individual inside a select dropdown for styling.
- You can set font size and color in the dropdown field, and it will apply to options in some browsers.
- Custom font families or bold/italic styles may not apply across all browsers.
3. Add Custom Code for Full Styling Control
- For complete control over dropdown styling, use custom select libraries (e.g., Choices.js, Select2) via Embed code blocks.
- You’ll need to:
- Include the JS/CSS in your project (via Page Settings or Embed Code).
- Replace the native Webflow select field with a structured div and use JavaScript to simulate dropdown behavior.
4. Trick: Simulate a Dropdown Using Webflow Components
- Use a Dropdown component (from the Navigation menu) as a form substitute.
- Create a
<div>that looks like a select box and build your list using links or buttons inside it. - Use interactions to simulate “open” and “select” behaviors.
- Submit the selected value using custom JavaScript that updates a hidden input field.
5. Cross-Browser Considerations
- Native select elements behave differently across Chrome, Firefox, Safari, and mobile browsers.
- Some limitations (like custom scrollbars or dropdown arrows) can’t be removed purely with CSS in Webflow.
Summary
You can style basic aspects of a Webflow dropdown form by applying a class to the field, but advanced styling requires custom code or component-based workarounds. For full design control, simulate a dropdown using divs and interactions or embed a third-party custom select library.