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

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

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

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