Remove Input Shadows on iPad
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.
![Create a CSS Flipping Animation]()
CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...
![Interview with a Pornhub Web Developer]()
Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...
![HTML5 Datalist]()
One of the most used JavaScript widgets over the past decade has been the text box autocomplete widget. Every JavaScript framework has their own autocomplete widget and many of them have become quite advanced. Much like the placeholder attribute's introduction to markup, a frequently used...
![Create a Dojo-Powered WordPress Website View]()
Yesterday I showed you WordPress' awesome JSON plugin named JSON API. Now that I can get my blog posts in JSON format, it's time to create an awesome AJAX'ed web app with that data. I've chosen to use the power of Dojo and Dijit to...
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/
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”.
Cheers :)
First off, I would suggest you to use the “none” property instead of “caret”:
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:
Also, this one is quite interesting as well:
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
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 !
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.
Regards
Matthew Xuereb
Any reason not to apply these styles for all input types?
So:
Thanks for the great post!
Awesome article.|
Another possibility to remove the isnet shadows:
This method (from article) break the input’s border on android (4.3, google chrome).
So Varon’s method the “best” way to do this.