ГлавнаяHTML/CSS → Как убрать тень с полей формы для WebKit браузера
HTML/CSS

Как убрать тень с полей формы для WebKit браузера

Как убрать тень с полей формы для WebKit браузера
HTML/CSS
Подпишись на нас в телеграм @coderoll

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


Решение на CSS

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

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

Важно знать

Обратите внимание, что указано

input:not([type=checkbox]):not([type=radio])


Это означает исключить инпуты типа checkbox и radio. Почему? Если вы пропишите тот же самый стиль для этим типов (radio, checkbox), то у вас пропадет точка в radio и галочка в checkbox.

Добавить комментарий
Кликните на изображение чтобы обновить код, если он неразборчив