it-roy-ru.com

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

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

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

137
Lyon

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

-webkit-appearance: none;
313
Lyon

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

-webkit-appearance: none;

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

box-shadow: none !important;

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

23
Justin Tolchin

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

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

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

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

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

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

8
TheCrazyProfessor

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

background-clip: padding-box; 

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

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

0
Sika Uma