删除Mobile Safari(iPhone)上的textarea内部阴影

Question

默认情况下,Mobile Safari似乎将顶部内部阴影添加到所有输入字段,包括textarea.有没有办法删除它？

当你有白色背景时,它尤其难看.

Answer 1

通过添加此css样式:

-webkit-appearance: none;

根据您使用的输入类型,可能更容易使用not运算符:`input:not([type = checkbox]):not([type = radio])` (33认同)
在输入类型复选框和单选按钮选择器上添加此属性时要小心,因为它隐藏了复选框和单选按钮;) (25认同)
谢谢里昂的回答.顺便说一句,使用它的最好方法是只将它应用于`textarea,输入[type ="text"],输入[type ="submit"]`. (13认同)
不要忘记`input [type ="password"]`. (7认同)
别忘了`[type ="email"]`! (6认同)

Answer 2

在添加CSS样式的同时

-webkit-appearance: none;

它会工作,它会摆脱一切.您可能想尝试这样做:

box-shadow: none !important;

这样你就可以保持向下箭头了.

Answer 3

这是一个简单的解决方案

input[type=text] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

Answer 4

有时你可以在那里打破样式表,appearance: none;以便在发生这种情况时使用它来修复它caret.最好的方法是重写代码并找出代码的一部分,这样就搞乱了代码none

在使用之前,caret您需要知道它可以让您在使用其他样式时遇到麻烦

-webkit-appearance: caret;
   -moz-appearance: caret;
     -o-appearance: caret;
        appearance: caret;

注意:使用none,caret不是最佳选择.