Как я могу остановить Safari, помещая изображение лупы в мое поле <input type = "search">?

Question

У меня есть текстовое поле (окно поиска), закодированное следующим образом

<input type="search" id="searchKeywords" name="searchKeywords" value="" maxlength="50">

То же самое не выглядит хорошо в Safari: у него фоновое изображение.

Но главная проблема, по-моему, из-за стиля по умолчанию:

-webkit-appearance: searchfield;

Я нашел это с помощью инструментов Safari Developer.

Как я могу переопределить то же самое?

Я уже пробовал использовать;

-webkit-appearance:none;

и используя !important, а также ...

Но, похоже, не переопределяется.

Пожалуйста, помогите мне. Спасибо.

Answer 1

Вы должны проверить http://Formalize.me это отличный маленький пакет, который манипулирует и стандартизирует объекты формы. При этом, похоже, он использует:

input[type=search] { -webkit-appearance: none; }

Answer 2

Если вы не хотите, чтобы браузер стилизовал его как поле поиска, вам, вероятно, придется использовать вместо него type="text", как это делает этот сайт.