删除iOSinput阴影

在iOS（Safari 5）上，我必须关注input元素（顶部内部阴影）：

我想删除顶部的阴影，错误-webkit-appearance不保存。

目前的风格是：

 input { border-radius: 15px; border: 1px dashed #BBB; padding: 10px; line-height: 20px; text-align: center; background: transparent; outline: none; -webkit-appearance: none; -moz-appearance: none; } 

Answer 1

你需要使用-webkit-appearance: none; 覆盖默认的IOS风格。 但是，在CSS中selectinput标签将不会覆盖默认的IOS样式，因为IOS通过使用属性select器input[type=text]来添加它的样式。 因此，您的CSS将需要使用属性select器来覆盖已经预先设置的默认IOS CSS样式。

尝试这个：

 input[type=text] { /* Remove First */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Then Style */ border-radius: 15px; border: 1px dashed #BBB; padding: 10px; line-height: 20px; text-align: center; background: transparent; outline: none; } 

有用的url：

你可以在这里了解更多关于appearance ：

http://css-tricks.com/almanac/properties/a/appearance/

如果您想了解更多关于CSS属性select器的信息，可以在这里find一篇非常丰富的文章：

http://css-tricks.com/attribute-selectors/

Answer 2

 background-clip: padding-box; 

似乎也删除阴影。

正如@davidpauljunior提到的; 在通用inputselect器上小心设置-webkit-appearance 。

Answer 3

webkit将删除所有属性

 -webkit-appearance: none; 

尝试使用属性框阴影来删除您的input元素上的阴影

 box-shadow: none !important; 

Answer 4

这对我更好。 此外，这意味着我不必将其应用于每种不同types的input（即文本，电话，电子邮件等）。

 * { -webkit-appearance: none; -moz-appearance: none; appearance: none; }