CODEWITHSUNDEEP
javascripthtmlsafaricss
copenndthagen
copenndthagen

Reputation: 50760

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.

Upvotes: 2

Views: 1542

Answers (2)

LeRoy
LeRoy

Reputation: 3215

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; }

Upvotes: 7

joostdevries
joostdevries

Reputation: 930

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.

Upvotes: 1

Related Questions