Удалить текстовое поле Внутренняя тень на мобильной версии Safari (на iPhone)

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

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

5 133
iphone mobile mobile-safari

5 ответов:

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

-webkit-appearance: none;
300

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

-webkit-appearance: none;

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

box-shadow: none !important;

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

23

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

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

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

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

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

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

7

параметр background и border css свойства input - тег также, кажется, работает.

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

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

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