Remove Input Shadows on iPad

By  on  
Mobile Safari

I was recently tasked with testing an existing web application on the iPad.  I was fairly certain the app would work without issues, but my larger concern was styling.  One undesirable style I found was that all text INPUT elements had a hideous top shadow effect.  After a bit of research, I discovered that the -webkit-appearance property was the key:

input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
	-webkit-appearance: caret;
	-moz-appearance: caret; /* mobile firefox too! */
}

Adding this bit of CSS removed those disgusting shadows and now my input elements look exactly as I'd like them to look! Of course, my inputs have other stylings (wrapped in a DIV with a border) to make their presence apparent. Using the placeHolder attribute would also be helpful in making INPUT elements more visible.

Recent Features

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • By
    CSS Rounded Corners

    The ability to create rounded corners with CSS opens the possibility of subtle design improvements without the need to include images.  CSS rounded corners thus save us time in creating images and requests to the server.  Today, rounded corners with CSS are supported by all of...

  • By
    CSS :target

    One interesting CSS pseudo selector is :target.  The target pseudo selector provides styling capabilities for an element whose ID matches the window location's hash.  Let's have a quick look at how the CSS target pseudo selector works! The HTML Assume there are any number of HTML elements with...

Discussion

  1. Thanks as always David; this solves an issue that had really been annoying me on one of the websites I maintain. I’ve posted some screenshots showing before and after on my blog with a link back here for the solution. Screenshots here: http://www.electrictoolbox.com/remove-input-shadows-ios-devices/

  2. Raphael

    Hey David!
    I was looking into finding a function to hide the transparent overlay on input and link elements and I found something after a long google trip into the world of iOS development and a hunt for the right keywords ;)

    Here are some useful informations:
    http://davidbcalhoun.com/tag/webkit

    To solve the problem I was having with the overlay, use the following on the element of choice: -webkit-tap-highlight-color:rgba(0,0,0,0);

    Another useful hint was the onClick delay on iOS and a solution for that:
    http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone

    And also, a little more on-topic:
    I would suggest you to use the “none” property instead of “caret”.

    -webkit-appearance: none;
    -moz-appearance: none;
    

    Cheers :)

  3. Raphael

    First off, I would suggest you to use the “none” property instead of “caret”:

    -webkit-appearance: none;
    -moz-appearance: none;
    

    Also, I came here in the hope that the CSS you provided would help me to get rid for the iOS selection-overlay for a more native iOS app feeling.
    As this didn’t help me, I started one of the more challenging google searches which then lead me to the right keywords to find the following page: http://davidbcalhoun.com/tag/webkit.

    The solution was this:

    -webkit-tap-highlight-color: transparent;

    Also, this one is quite interesting as well:

    -webkit-touch-callout: none; /* preventing the usual popup to show when touch-holding an item on the page */

    Another interesting find was the onClick delay in iOS and a solution to that:
    http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone

    I hope it helps !

    Cheers,

    Raphael

  4. Raphael

    Ok. That was fun !
    Your comment boxes event for telling a user about the success of a comment submission is not that obvious as it should be. I was getting a red focus which led me to believe my comment had an error ! That was the reason for my above double-post and why I rewrote the whole thing. I thought it was lost !

  5. Thanks a million. This was doing my head in.

    I’m also using the following snippet to remove the grey highlight that occurs when you touch an element.

    -webkit-tap-highlight-color: rgba(0,0,0,0);  /* rgba('RED', 'GREEN', 'BLUE', 'ALPHA' )
    

    Regards

    Matthew Xuereb

  6. Craayzie

    Any reason not to apply these styles for all input types?

    So:

    input {
    	-webkit-appearance: caret;
    	-moz-appearance: caret; /* mobile firefox too! */
    }
    

    Thanks for the great post!

  7. Awesome article.|

  8. Another possibility to remove the isnet shadows:

    input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
      background-clip: padding-box;
    }
    
    • Anton

      This method (from article) break the input’s border on android (4.3, google chrome).

      -webkit-appearance: none;
      -moz-appearance: none;
      

      So Varon’s method the “best” way to do this.

      input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
        background-clip: padding-box;
      }
      

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!