How can I remove the default iOS input styles from my Webflow site to ensure it looks consistent across desktop and mobile devices?

To ensure consistent input styles across devices, you need to override the default iOS styling applied to form inputs like the inner shadows, rounded corners, and font behavior.

1. Remove Native iOS Input Styling

• iOS Safari applies default styling to input fields, especially for types like search, email, and text.
• To remove these, use custom CSS overrides through Webflow’s Embed element or Custom Code section.

2. Add Global CSS Resets in Webflow

• Go to Page Settings (if the styles are page-specific) or Project Settings → Custom Code (to make it site-wide).

• In the Head or Footer Custom Code field, add this inline CSS to neutralize iOS styling:

  ```
  /_ Remove iOS inner shadows and adjust appearance _/
  input, textarea, select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  font-family: inherit;
  }

  /_ Remove default iOS autofill styling _/
  input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px white inset !important;
  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
  -webkit-text-fill-color: #000 !important;
  }
  ```

• Publish your site to see the changes take effect on actual mobile devices.

3. Use Consistent Webflow Styles

• In the Webflow Designer, select your input fields and apply consistent styles like padding, borders, background color, and font.
• Avoid using “All Form Inputs” if you want precise control. Instead, add a custom class to each input and style accordingly.
• Be sure to check mobile previews using Webflow’s built-in device views and real devices when possible.

4. Test on Real iOS Devices

• iOS behavior sometimes only appears on real devices or Safari mobile.
• Use BrowserStack, physical devices, or ask colleagues with iPhones to verify.

Summary

To remove default iOS input styles in Webflow, override native input appearance using custom CSS in Project Settings or Embed elements, and apply consistent styles using classes in the Designer. Test on real iOS devices to ensure cross-device consistency.