移除移动 Safari (iPhone)上的文本区内阴影

小开

最佳答案

通过添加 css 样式:

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

小开

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

试试这个:

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


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

小开

在添加 CSS 样式时

-webkit-appearance: none;

将会工作，它摆脱了一切。你可能想试试这个代替:

box-shadow: none !important;

这样你就可以保留下箭头了。

小开

有时您可能会有一个样式表破坏了 appearance: none;，所以当这种情况发生时，修复它的方法是使用 caret。最好的方法将是重写您的代码，并找出您的代码中有什么部分搞乱了 none的样式

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

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

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

小开

这是一个简单的解决办法

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

小开

background-clip: padding-box;

我在这里发现了一条老的同样的回答评论。