iPhone web app - type=text inner shadow issue

Question

Hi Guys, 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.

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

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 3

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.