20

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

Marcin
  • 5,469
  • 15
  • 55
  • 69

6 Answers6

31

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.

sirhc
  • 6,097
  • 2
  • 26
  • 29
  • 3
    It's not recommended to use that technique because of this [issue](http://zomigi.com/blog/bug-fixes-for-removing-the-inner-shadow-on-ios-inputs/). Richard Rose's answer is the best way to achieve the solution. – Bobby Aug 20 '13 at 09:27
7

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)));

Richard Rose
  • 71
  • 1
  • 1
  • 1
    This is the best answer that doesn't interfere with any other styling. For example, the -webkit-appearance:caret; will mess up most other styles that you may have assigned already. – marcel salathe Aug 27 '13 at 22:40
  • This one only removes what was asked (shadow), instead of changing the style completely, "appearance: caret" for example does not let you use borders... – miguelmpn Aug 05 '15 at 13:43
2

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 :(

Christopher Thomas
  • 4,424
  • 4
  • 34
  • 49
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

Jamin
  • 21
  • 1
2

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.

David Quinn Carder
  • 161
  • 1
  • 6
0
-webkit-appearance:caret;

Should remove just the inset shadows on your inputs

digiliooo
  • 821
  • 7
  • 9