How can I remove the default iOS input styles from my Webflow site to ensure it looks consistent across desktop and mobile devices?
TL;DR
- Add custom CSS in Webflow to set appearance: none and remove border-radius, neutralizing iOS default input styles.
- Use class-based styling in the Designer to control input appearance.
- Turn off autocorrect and autocapitalize in Input Settings for better UX.
- Test inputs on real iOS devices to confirm consistent styling.
iOS applies default styling to input fields (like rounded corners and inner shadows) that can cause inconsistencies in your form design. Here's how to override those styles in Webflow for consistent appearance across all devices.
1. Neutralize iOS Input Appearance
- Set
appearance: none;and-webkit-appearance: none;to remove iOS-specific form styling. - In Webflow, do this by adding a custom CSS rule to your project.
How to add the custom CSS:
- Go to Project Settings > Custom Code > Head or Body section, and add the following within
<style>tags:
`<style>
input, textarea, select {
-webkit-appearance: none;
appearance: none;
border-radius: 0;
}
</style>`
- This disables the default input styles and removes the iOS rounded corners.
2. Use Class-Based Styling in Webflow
- Apply a class to your input fields in the Webflow Designer.
- Control styles like padding, borders, background color, shadows, etc., directly inside the Webflow UI.
- This ensures desktop and mobile inputs behave consistently and respects your custom design.
3. Disable Autocorrect & Autocapitalize (Optional)
- iOS automatically applies autocorrect and capitalization, which can affect user experience:
- Select the input field in Webflow.
- Under Settings > Input Settings, set:
- Autocorrect to "Off"
- Autocapitalize to "Off"
- Autocomplete as needed (e.g., "Off" for a more consistent feel)
4. Test on Real Devices
- After publishing, test on an actual iPhone or iOS simulator to confirm overridden styles apply correctly.
- If results are inconsistent, inspect the field using browser dev tools (e.g., Safari's Responsive Design Mode).
Summary
To override default iOS input styles in Webflow, add appearance: none with custom CSS, use class-based styling, and adjust iOS-specific input settings like autocorrect. This ensures consistent input styling across all platforms.
