Стилизовать input[type=search] для mac — css

Совсем недавно, разрабатывая систему тестирования кандидатов, столкнулся с неожиданной проблемой - к полю ввода не применялись стили. Причем воспроизводился этот дефект только на компьютерах под управлением Mac OS. При рассмотрении проблемы выяснилось, что у поля ввода input стоит не просто type=text, а вовсе type=search. Как сделать, чтобы и к такому полю применялись написанные стили? Давайте разберемся!

Все дело в том, что это специальный тип поля ввода. А значит браузер (в данном случае Chrome для Mac OS) просто применял к нему "стандартный" по его мнению стиль и игнорировал стили, написанные мной. Этого эффекта можно избежать, добавив элементу css свойство:

-webkit-appearance:none;

Вот и все. Теперь наш input[type="search"] стилизуется как и другие поля ввода type=text. Всем валидной верстки!