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

Question

По умолчанию Mobile Safari добавляет верхнюю внутреннюю тень ко всем полям ввода, включая текстовое поле.Есть ли способ удалить его?

Это особенно некрасиво, когда у тебя белый фон.

Answer 1

Добавив этот стиль CSS:

-webkit-appearance: none;

Answer 2

При добавлении стиля CSS

-webkit-appearance: none;

сработает, избавится от всего. Вы можете попробовать это вместо этого:

box-shadow: none !important;

Таким образом вы удерживаете стрелку вниз.

Answer 3

Вот простое решение

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

Answer 4

Иногда у вас может быть таблица стилей, сломанная appearance: none;, поэтому способ исправить это, если это произойдет, - использовать caret. Лучшим способом будет переписать ваш код и выяснить, какая часть вашего кода испортила стиль для none

Перед использованием caret вам необходимо знать, что это может вызвать проблемы с другими стилями

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

ПРИМЕЧАНИЕ: Использование none, caret не является оптимальным.

Answer 5

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

background-clip: padding-box;

, и я нашел более старый комментарий с ответами здесь.

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

Answer 6

Установка свойств background и border css тега input также работает

Попробуйте это:

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

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