Remove Input Shadows on iPad

Discussion

1. Chris Hope

   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. Matthew

   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. Nadene Hilado

   Awesome article.|
8. Varon

   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;
  }