How can I stop Safari putting a magnifying glass image in my <input type="search"> field?

I have a textbox (searchbox) coded as follows

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

The same does not appear fine in Safari: it has a background image.

But the main issue, according to me, is because of some default style:

-webkit-appearance: searchfield;

I found this using the Safari Developer tools.

How can I override the same?

I have already tried using;

-webkit-appearance:none;

and using !important as well...

But does not seem to be getting overridden.

Please help me. Thank you.

You should check out http://Formalize.me it is a great little package that manipulates and standardizes form objects. That being said it looks like it uses:

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

If you don't want the browser to style it as a search field you'll probably have to use type="text" instead, just like this site does.