Remove input shadows on iOS devices

Posted in OSX -

One thing I've found annoying with the mobile Safari browser on iOS is the shadows that appear at the top of input boxes. It's not normally too much of an issue unless you are doing fancy styling and then they can make it really messy and ugly. Fortunately David Walsh has provided a solution. I won't repeat the solution but do post some screenshots here showing the issue and how much better it can look after applying his fix.

Example of default input styling with and without top shadow

The first screenshot below is taken from the iOS Simulator using an iPhone. The input and textarea on the left are the default styling and those on the right are default styling with the shadow removed.

default styling for text input on ios and with top shadow removed 

Using default styling, there's nothing wrong with that top shadow but as soon as you try and do something different then it just gets ugly.

Example of stylized input box with and without top shadow

For example, take a look at the following partial screenshot taken from the Personalised Plates website homepage where the visitor can search for a plate idea:

top shadow appearing on special style input

The top shadow appears even though all the other borders etc have been switched off, and it just looks ugly. Applying David's fix (which I've not yet applied to the prodction website) makes it look a lot better like so:

top shadow removed on special style input

The solution

Now you've seen the before and after, go read David's "Remove Input Shadows on iPad" post for the solution.




Comments