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

152

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

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

iphone mobile mobile-safari Лион
источник

Ответы:

340

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

-webkit-appearance: none;
Лион
источник
26
будьте осторожны при добавлении этого свойства в поля ввода переключателей и переключателей, поскольку оно скрывает флажки и переключатели;)
Zain Shaikh
14
Спасибо за ответ, Лион. Кстати, лучший способ использовать его - это применять только к textarea, input[type="text"], input[type="submit"].
августа
8
Не забывай input[type="password"]тоже.
Ник Питт
7
Тоже не забывай [type="email"]!
Уилстер
35
Может быть проще использовать оператор not, в зависимости от того, какие типы ввода вы используете:input:not([type=checkbox]):not([type=radio])
Джастин Фишер,
30

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

-webkit-appearance: none;

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

box-shadow: none !important;

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

Джастин толчин
источник
6
Просто добавление свойства box-shadow не работает. Внутренняя тень по-прежнему отображается в Safari на iOS.
тихий рот
22

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

input[type=text] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
IqbalBary
источник
9

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

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

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

Примечание: Использование none, caretне является оптимальным.

TheCrazyProfessor
источник
-31

Установка либо backgroundи borderCSS свойства inputтега также , кажется, работает.

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

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

<form>
First name: <input type="text"/><br />
Last name: <input type="text" />
</form>
МТС
источник
9
Неверно и вводит в заблуждение. Пожалуйста, проверьте ваш код на нужном устройстве, прежде чем публиковать ...
Ариэль
Действительно неправильный ответ, ничего об этом не то, о чем спрашивает ОП
Jacta