В этом небольшой записи я хочу рассказать про проблему, касающуюся всех iOS устройств во время разработки мобильной версии.

Во время разработки мобильной версии для iOS устройств в Safari браузере, я сталкивался со следующей проблемой: на всех полях формы input, textarea присутствует внутренняя тень, а так же иногда закругление.

Я попытался решить проблему с box-shadow, указал transparent (прозрачность), но это не помогло. После чего начал искать как можно это решить и в итоге нашел (код ниже).

Решение (CSS)

Внизу указан CSS стиль, который убирает закругления и тень у полей в WebKit браузерах.

input:not([type=checkbox]):not([type=radio]),
textarea, 
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

Почему нужно использовать это? Я приведу пример. Если вы посмотрите на input с атрибутом search — <input type="search"> с WebKit браузера, то по умолчания там будет внутренняя тень, а так же закругления по краям.

Если поле не типа search, то в нем будет внутренняя тень, а так же закругление.

До

Вот как примерно это выглядит это внедрения стилей.

После

А это уже после того как добавили стили. Как можно видеть, тень убралась и закругления тоже.

Важно знать

Обратите внимание, что я написал input:not([type=checkbox]):not([type=radio]) что означает исключить инпуты типа checkbox и radio. Почему? Если вы пропишите тот же самый стиль для этим типов (radio, checkbox), то у вас пропадет точка в radio и шалочка в checkbox.

А чем вы сами лично пользуетесь, чтобы убрать недочеты в мобильной версии?

На этом все. Если у вас остались какие-либо вопросы — задавайте их ниже к комментарии под этой записью.