删除Mobile Safari(iPhone)上的文本区域内部阴影

通过添加此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

使用前 插入符号 你要知道它会给你带来其他风格的麻烦

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

注: 使用 没有人 , 插入符号 不是最佳的。

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

background-clip: padding-box;

我在这里发现了一个老的相同答案评论。

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

设置任一 background 和 border 的CSS属性 input 标签似乎也起作用。

试试这个:

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

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