How can I fix the issue of the select (dropdown) button on Webflow not displaying the correct styling on mobile browsers (Chrome and Safari) for iPhone?
- iOS browsers force native styling on
<select>elements, limiting custom styles applied in Webflow. - To achieve full control, replace the native select with a custom dropdown using divs and interactions or integrate a JavaScript plugin like Choices.js or Select2.
Dropdown (Select) elements in Webflow may not display custom styles correctly on iPhone browsers like Safari and Chrome due to iOS-rendering limitations. Here's how to address and work around this issue.
1. Understand iOS Limitations
- iOS (including Chrome for iOS) uses the Safari rendering engine (WebKit), which enforces native styling on
<select>elements for usability and accessibility. - This means custom borders, padding, fonts, background colors, or arrows may not appear as intended.
2. Use Webflow’s Custom Select Styling Properly
- Webflow allows some styling of the Select field and Select Field Options — but this styling is often ignored on mobile Safari.
- Styling like font size, font color, and background color may apply for desktop but not on iPhone browsers.
3. Workarounds for Custom Styling on iOS
To fully customize the look of a dropdown on iPhone, consider these methods:
Simulate the select with a custom dropdown component:
Use a div block styled like a select box.
Add a collection of clickable elements (using dropdown or interaction triggers) to act like options.
Store the selected value in a hidden Webflow form field for form submissions.
This ensures full styling control across all devices.
Use a third-party form plugin:
Integrate a library like Choices.js or Select2 via embed code, which replaces native
<select>elements with stylable HTML/CSS content.Note: embedding custom JavaScript requires a paid Webflow plan with custom code support.
4. Add Specific iOS Workarounds (Optional CSS Tweaks)
If you just want slight improvements:
- Add custom code targets for iOS using media queries like:
@supports (-webkit-touch-callout: none) { … }- This lets you apply styles specifically to Safari/Chrome on iPhone.
- Place this code inside the Page Settings → Custom Code → Head or Footer.
- Note: These still won’t override native dropdown behavior but can tweak padding/margins.
Summary
iOS restricts custom styling of <select> fields, making them appear with native UI. To fix this on mobile browsers like Safari and Chrome for iPhone, replace the native element with a fully custom interactive dropdown in Webflow, or use a JS plugin for stylable dropdowns. Pure CSS changes won’t fully resolve the issue on iOS.