iPhone web app - type=text inner shadow issue

Question

I am trying to disable top inner shadow in input=text field which is applied by default by iPhone. Any ideas how to do this? tried to overwrite -webkit-box-shadow with no success.

alt text http://feedsmanagement.com/example.png

cheers

Answer 1

Have you tried using -webkit-appearance: none then applying a custom border like border: 1px solid black;

I can't try this out at this moment.

Answer 2

You can add a background image gradient to remove the inner shadow; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255,255,255)), to(rgb(255,255,255)));

Answer 3

I have had this same issue, wanting to display input text fields that are styled: WITHOUT shadows. My solution (works perfectly on iPad/ iPhone) make background gif that is completely transparent. Apply that style to your input field. My code was:

.textBox input { border:none; background:url(../images/bg_inputFix.gif); }

-Jamin

Answer 4

I found that Jamin's answer was better for now. If I use the -webkit-appearance: none method instead, on the iPad it no longer applies my focus (pseudo-class) styles when a textarea/input is selected. It kind of ruins my form styling because textareas/inputs not in focus are significantly subdued.

Answer 5

I did the background gradient and it doesnt work, I also found a variation of it:

input[type='text']{
-webkit-border-radius: 0;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(hsla(0,0%,100%,0)), to(hsla(0,0%,100%,0)));
background-image:-webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0));
}

and that hasn't worked either :(

Answer 6

-webkit-appearance:caret;

Should remove just the inset shadows on your inputs