Тень у полей ввода в мобильном Safari

У всех полей ввода в мобильном 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;
}