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

默认情况下，Mobile Safari似乎在所有输入字段（包括文本区域）中添加了顶部内部阴影。有没有办法将其删除？

当您有白色背景时，这尤其难看。

通过添加以下CSS样式：

-webkit-appearance: none;

在添加CSS样式时

-webkit-appearance: none;

将工作，它摆脱了一切。您可能想尝试以下方法：

box-shadow: none !important;

这样，您可以保持向下箭头。

这是简单的解决方案

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

有时，您可以在其中放置样式表，appearance: none;以便在发生这种情况时对其进行修复caret。最好的方法是重写代码，找出代码的一部分，弄乱了样式none

使用之前，caret您需要了解其他样式可能会给您带来麻烦

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

注意：使用none，caret不是最佳选择。

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

background-clip: padding-box;

我在这里找到了一个较旧的相同答案评论。

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

设置标签的一个background和bordercss属性input似乎也可行。

试试这个：

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

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