删除Mobile Safari（iPhone）上的textarea内部阴影

Question

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

当你有白色背景时，它尤其难看。

Answer 1

通过添加此css样式：

-webkit-appearance: none;

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不是最佳选择。

Answer 5

https://stackoverflow.com/a/51626446/9287284

background-clip: padding-box;

我在这里发现了一个较旧的答案评论。

https://stackoverflow.com/a/29750016/9287284

Answer 6

设置background标签的border和input css属性似乎也有效。

试试这个：

<style>
input {
    background: #ccc;
    border: none;
}
</style>

<form>
First name: <input type="text"/><br />
Last name: <input type="text" />
</form>