У всех полей ввода в мобильном Safari на iPhone и iPad есть легкая внутренняя тень. Если это поле как-то особенно декорируется, то тень может помешать нормальному отображению. Убрать её можно, назначив фоном не сплошной цвет или текстуру, а градиент.
@media screen and (-webkit-min-device-pixel-ratio:0) {
.search {
/* remove inner shadow on iOS input */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(hsla(0,0%,100%,0)), to(hsla(0,0%,100%,0)));
background-image: -webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0));
}
}
Параметры подбираются в зависимости от контекста.
Так как эта тень никак не проявляет себя в настольных браузерах, то правила для неё фильтруем с помощью media queries и префиксов только для мобильных устройств.
Очень простое решение
Роман Комаров подсказал, что эту тень можно убрать более простым способом
.search {
-webkit-appearance: none;
}
Коментарии к заметке
It’s dangerous to go alone! Take this.
-webkit-appearance: none;
kizu, спасибо за рекомендацию. Мне показалось, что изначальный
-webkit-appearance: textfield
может быть используется для чего-то ещё, а не только чтобы отбрасывать тень.Присоединяюсь. Давно эта то-ли тень напрягала. Спасибо за решение.