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?

TL;DR
  • iOS limits CSS styling for <select> elements, so use appearance: none and custom CSS for partial styling improvements.
  • For full control, build a custom dropdown in Webflow using Divs and interactions, or wrap the native select in a styled Div with a custom arrow icon.

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.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Can Webflow allow the use of a URL as an image? I imported an image URL as text via a CSV but couldn't figure out how to display it as an image. Is there a solution for this?
How can I create a smooth scroll Back to Top Button in Webflow for long pages or for when I want to add a modern feature that only appears once the visitor has scrolled down a bit? Can you provide an example?
What is the tool that the Webflow Enterprise Partner has created to help creators translate their projects into multiple languages, adding value and features to the upcoming Webflow multilingual release?
Is it possible to have visitors add filters to the FAQ page on my Webflow website using an input field or something similar, while still allowing for a general site search in the future?
Does Webflow require me to use Bonsai for client billing, or can I transfer client sites to their own accounts and remove myself from the equation?
Where can I modify the settings in Webflow to display my desired content instead of showing the template or Webflow name (as seen in the attached screenshot)?
Can I remove a hover (added by mistake) in Webflow to clean up the CSS?
Has anyone used an iPad Pro for working with Webflow, and if so, how was the experience?
Have you experienced compatibility issues with Webflow on Safari where a significant portion of your site disappears while it appears fine on Chrome, Firefox, and Edge?
How can I give access to only one specific page in a CMS collection with gated membership access in Webflow?
What code can I use to deactivate the zoom in on my phone when I focus on the form (text input) elements in Webflow?
Is there a comprehensive list of custom attributes and their functionalities in Webflow?
How can I implement chart.js into Webflow using an html embed element or a div?
How can I control the smoothness of gradients in Webflow? Is there a workaround that involves adding custom code?
What is the optimal image size to ensure full visibility in both width and height on the La Chiva page of a Webflow website?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?