Snippet: jak pozbyć się cienia z inputów i textarea pod mobilnym Safari?

Mobilne Safari robi nam psikusy. Kilka dni temu pisałem o dziwnym skalowaniu tekstu, dziś sposób na poprawne ostylowanie pól tekstowych i buttonów. Safari niestety domyślnie w nosie ma nasz CSS i do inputów dodaje na siłę border-radius i wewnętrzny cień.

Aby się tego pozbyć, musimy posilić się prefixowanym parametrem „apperance”.

input, button, textarea, select { -webkit-appearance: none; }

Parametr ten występuje także w wersji z prefixem „-moz-apperance” i pozwala zmienić sposób wyświetlania elementu tak, aby wyglądał jak natywna kontrolka systemowa. Ciekawą prezentację znajdziemy na MDN. Do tej pory jedynie pod mobilnym Safari spotkałem się z potrzebą wykorzystania go – Safari na PC oraz OS X nie wykorzystują go w swoich domyślnych stylach.