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

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

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

Ответы

Ответ 1

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

-webkit-appearance: none;

Ответ 2

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

-webkit-appearance: none;

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

box-shadow: none !important;

Таким образом, вы сохраняете стрелку вниз.

Ответ 3

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

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

Ответ 4

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

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

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

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

Ответ 5

Похоже, что работает работа с параметрами background и border css тега input.

Попробуйте следующее:

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

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