While putting some ‘finishing’ touches on this site, I noticed an annoying shadow appearing at the top of my search box on the iPad and iPhone. I thought that I had completely removed all appearance from the input field, but apparently not.

To figure out why, I started browsing around on the iPad to find a text input field that didn’t have this shadow. My first try was Google, which did have it. My second was Bing — success, no shadow!

In non-Mobile Safari, I used the Web Inspector to see what styles Microsoft was applying to their search box. Here’s the CSS:

-webkit-appearance: none;

Safari applies -webkit-appearance: textarea; by default. In Safari 5, this doesn’t seem to do anything. But in Mobile Safari, you get that shadow.

Problem solved.