移除 Mobile Safari (iPhone) 上的 textarea 内阴影答案

【问题标题】：Remove textarea inner shadow on Mobile Safari (iPhone)移除 Mobile Safari (iPhone) 上的 textarea 内阴影
【发布时间】：2011-03-05 00:39:05
【问题描述】：

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

当你有白色背景时，它特别难看。

【问题讨论】：

标签： iphone mobile mobile-safari

【解决方案1】：

通过添加这个 css 样式：

  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;

根据https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

【讨论】：

在输入类型复选框和单选按钮选择器上添加此属性时要小心，因为它隐藏了复选框和单选按钮;)
感谢里昂的回答。顺便说一句，使用它的最佳方法是仅将其应用于textarea, input[type="text"], input[type="submit"]。
别忘了input[type="password"]。
别忘了[type="email"]！
可能更容易使用 not 运算符，具体取决于您使用的输入类型：input:not([type=checkbox]):not([type=radio])

【解决方案2】：

在添加 CSS 样式时

-webkit-appearance: none;

会起作用，它会摆脱一切。你可能想试试这个：

box-shadow: none !important;

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

【讨论】：

仅仅添加 box-shadow 属性是行不通的。 iOS 上的 Safari 中仍会显示内部阴影。

【解决方案3】：

这是一个简单的解决方案

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

【讨论】：

【解决方案4】：

有时您的样式表可能会破坏appearance: none;，因此在发生这种情况时修复它的方法是使用caret。最好的方法是重写你的代码，找出你的代码的一部分，弄乱none的风格

在使用caret之前，你需要知道它会给你其他样式带来一些麻烦

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

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

【讨论】：

【解决方案5】：

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

background-clip: padding-box;

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

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

【讨论】：

【解决方案6】：

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

试试这个：

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

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

【讨论】：

不正确且具有误导性。请在发布之前在正确的设备上测试您的代码...
真的是错误的答案，OP问的不是这个问题