Удалите текстовую внутреннюю тень на Mobile Safari (iPhone)

По умолчанию кажется, что 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>