Understanding the iOS Form Styling Issue

If you have ever designed a sleek web interface with dark mode, glowing borders, or modern glassmorphism, testing it on iOS Safari can be a frustrating experience. Mobile Safari automatically applies its own native UI styles to form controls like <input>, <select>, <button>, and <textarea>. These native styles often inject default inner shadows, subtle gradients, forced border-radii, or solid white background overlays that completely ruin transparent or semi-transparent glassmorphism effects.

Even when developers apply -webkit-appearance: none; globally using a universal selector (*), iOS can still apply hidden background layers or autofill styles. In this guide, we will look at why this happens and how to completely strip away iOS system styles to achieve clean, custom form styling.

The Core Solution: Resetting Form Elements Properly

Applying WebKit appearance resets globally with * is often insufficient because specific user-agent stylesheet rules override universal selectors. Instead, you must target form elements explicitly and combine appearance resets with explicit background and border resets.

1. Target Form Elements Explicitly

Apply the CSS appearance property directly to all interactive form controls: