Remove textarea inner shadow on Mobile Safari (iPhone)
IphoneMobileMobile SafariIphone Problem Overview
By default, it seems Mobile Safari adds the top inner shadow to all input fields, including textarea. Is there a way to remove it?
It's especially ugly when you have a white background.
Iphone Solutions
Solution 1 - Iphone
By adding this css style:
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
As per https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
Solution 2 - Iphone
While adding the CSS style
-webkit-appearance: none;
will work, it gets rid of everything. You may want to try this instead:
box-shadow: none !important;
This way you keep the down-arrow.
Solution 3 - Iphone
Here is the easy solution
input[type=text] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Solution 4 - Iphone
Sometimes you can have a stylesheet there broke the appearance: none;
so a way to fix it when that happens is to use caret
. The best way will be to rewrite your code and find out what's part of your code there mess up the style for none
Before using caret
you need to know that it can get you some trouble with other styles
-webkit-appearance: caret;
-moz-appearance: caret;
-o-appearance: caret;
appearance: caret;
> NOTE: Use none
, caret
is not the optimal.
Solution 5 - Iphone
https://stackoverflow.com/a/51626446/9287284
> background-clip: padding-box;
and I found an older same answers comment at here.
Solution 6 - Iphone
Setting either background
and border
css properties of the input
tag also seems to work.
Try this:
<style>
input {
background: #ccc;
border: none;
}
</style>
<form>
First name: <input type="text"/><br />
Last name: <input type="text" />
</form>