Remove iOS input shadow
You'll need to use -webkit-appearance: none;
to override the default IOS styles. However, selecting just the input
tag in CSS will not override the default IOS styles, because IOS adds it's styles by using an attribute selector input[type=text]
. Therefore your CSS will need to use an attribute selector to override the default IOS CSS styles that have been pre-set.
Try this:
input[type=text] { /* Remove First */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Then Style */ border-radius: 15px; border: 1px dashed #BBB; padding: 10px; line-height: 20px; text-align: center; background: transparent; outline: none; }
Helpful Links:
You can learn more about appearance
here:
http://css-tricks.com/almanac/properties/a/appearance/
If you'd like to learn more about CSS attribute selectors, you can find a very informative article here:
background-clip: padding-box;
Seems to remove the shadows as well.
As @davidpauljunior mentioned; be careful setting -webkit-appearance
on a general input selector.