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?

The issue occurs when the native styling of a <select> dropdown on iOS overrides Webflow’s custom styles, especially on mobile Safari and Chrome. To resolve this, you'll need to apply mobile-specific adjustments and accept some limitations of native dropdown rendering on iOS.

1. Understand Native Limitations on iOS

• iOS does not allow full CSS styling for native <select> elements, including font size, arrow icons, padding, etc.
• Safari and Chrome on iPhone both use the same WebKit engine, so styling restrictions are the same across both browsers.

2. Use Webflow’s "Custom Dropdown" Structure (Optional)

• For full styling control, consider replacing the native <select> with a custom dropdown built using Webflow's Div blocks, interactions, and text elements.
• You'll get complete control over visuals, but you’ll lose native form behaviors (keyboard navigation and mobile picker UI).

3. Improve Mobile Styling of Native <select>

If you want to keep the native form element and improve its appearance:

• Set width to 100% of the parent container to ensure mobile sizing is consistent.
• Remove browser-default styling by adding the following custom CSS in the page settings or site-wide:

• appearance: none;  
• -webkit-appearance: none;  
• -moz-appearance: none;  

  (Webflow doesn't allow pseudo elements or full CSS injection in Designer UI, so use the site/page Custom Code fields.)

• Add padding and background styles carefully:
• For example, set enough right padding to not overlap the dropdown arrow.
• Set a consistent background color, border, and border-radius.

4. Add a Custom Dropdown Arrow (Workaround)

• iOS hides custom arrows. To display a consistent arrow:
• Wrap the native <select> in a Relatively-positioned Div.
• Place a custom arrow icon (SVG or image) inside the wrapper using absolute positioning.
• Ensure the arrow doesn't interfere with the dropdown’s click area.

5. Test on Devices and Adjust Viewport Fixes

• Use Webflow’s preview mode along with actual device testing.
• Force mobile view using Developer Tools in Chrome, Safari, or Xcode Simulator for more accurate previews.

Summary

iOS restricts custom styling of <select> elements, so use appearance: none, wrap the field for extra styling (including custom arrows), or build a fully custom dropdown in Webflow with Divs and interactions for full control.