Remove textarea inner shadow on Mobile Safari (iPhone)

0 votes
asked Jun 17, 2010 by lyon

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.

5 Answers

0 votes
answered Jan 20, 2010 by mts

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>
0 votes
answered Jun 20, 2010 by lyon

By adding this css style:

-webkit-appearance: none;
0 votes
answered Jan 27, 2014 by justin-tolchin

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.

0 votes
answered Jan 23, 2015 by thecrazyprofessor

Sometimes you can have a stylesheet there broke the appearance: none; so a way to fix it when that happen 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 carat 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.

0 votes
answered Jan 25, 2016 by iqbal-bary

Here is the easy solution

input[type=text] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...