Introduction

Safari on iOS applies native styling to form controls, and one visible side effect is the default inner shadow or glossy look on text inputs. If your design uses flat inputs, rounded fields, or custom borders, that platform styling can clash with the rest of the UI. The fix is usually to remove the native appearance and then restyle the input explicitly.

Why the Shadow Appears on iOS

On iPhone and iPad browsers, many form controls are rendered with WebKit-specific defaults rather than with only your CSS declarations. Even if you set border-radius, border, and background-color, the browser may still keep the built-in control appearance.

That is why an input can look correct on desktop Chrome but still show an inset shadow on mobile Safari.

Use appearance and box-shadow

The standard starting point is to remove native appearance and shadow together.

1input,
2textarea,
3select {
4  -webkit-appearance: none;
5  appearance: none;
6  box-shadow: none;
7  border-radius: 12px;
8  border: 1px solid #c7ccd1;
9  background-color: #fff;
10}

This works for many common text fields. -webkit-appearance: none tells iOS Safari to stop drawing the platform-specific control skin, and box-shadow: none clears any remaining CSS shadow.

Full Example for a Flat Input Style

A complete reset often looks like this:

<input class="search-input" type="text" placeholder="Search" />

1.search-input {
2  -webkit-appearance: none;
3  appearance: none;
4  box-shadow: none;
5  outline: none;
6  border: 1px solid #d0d7de;
7  border-radius: 10px;
8  background: #ffffff;
9  color: #1f2328;
10  padding: 12px 14px;
11  font-size: 16px;
12}
13
14.search-input:focus {
15  border-color: #0969da;
16  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.15);
17}

The focus state is intentionally reintroduced with your own shadow so the field still looks interactive after the iOS default styling is removed.

Special Case: Search Inputs and Other Input Types

Some input types carry extra platform behavior. For example, type="search" on iOS may apply special styling and built-in controls. If you still see native rendering artifacts, reset the input more aggressively or switch to type="text" if the semantic difference is not required.

input[type="search"] {
  -webkit-appearance: none;
}

That is often enough to remove the rounded native search chrome and inner shadow.

Test the Real Device, Not Only the Simulator

This kind of issue is easy to misjudge in desktop browser emulation. The safest validation is:

• test on a real iPhone or iPad if possible
• compare Safari and in-app web views if your app uses both
• test focus, placeholder text, and autofill states

iOS can render focused, autofilled, and disabled controls differently, so the shadow may seem gone until another control state appears.

Do Not Remove Styling Without Replacing Usability

Removing native appearance is not purely cosmetic. Once you neutralize the built-in look, you also take responsibility for focus visibility, borders, contrast, and touch-target clarity. Flat inputs that match the design but have weak focus indication are a usability regression.

That is why the best fix is not only "remove the shadow". It is "remove the shadow and replace the field styling with a consistent accessible design".

Common Pitfalls

• Removing the default shadow but forgetting to add a visible custom focus state.
• Testing only on desktop emulation instead of real iOS Safari.
• Resetting appearance on one input type but not others such as search or textarea.
• Assuming the shadow comes from your CSS when it is actually native WebKit styling.
• Using very small font sizes and triggering mobile form quirks unrelated to the shadow itself.

Summary

• iOS Safari often applies native input styling that includes an inner shadow.
• The main fix is -webkit-appearance: none plus explicit custom styling.
• 'box-shadow: none removes leftover CSS shadow, but native appearance usually needs to be disabled too.'
• Some input types such as search fields need extra attention.
• After removing the default look, add your own focus and interaction styling so the control stays usable.