CODEWITHSUNDEEP
htmlsearchinput
APAD1
APAD1

Reputation: 13666

HTML5 Search Input magnifying glass override?

I am using an HTML5 search input on my site and in some browsers the magnifying glass is being rendered(Safari/Chrome) and in others it's not (Firefox/IE). How can I override the default magnifying glass icon so I can just code a custom search icon in for every browser?

Switching the input type to text won't work because I want the user to be able to click enter after entering their search.

Thanks!

Upvotes: 0

Views: 1844

Answers (2)

Henrik Albrechtsson
Henrik Albrechtsson

Reputation: 1742

input {
    -webkit-appearance: none;
}

or if you want to be more specific

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

Upvotes: 0

tobiv
tobiv

Reputation: 842

Reset webkit styling:

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

To also hide the "Clear" button:

::-webkit-search-cancel-button { display: none; }

EDIT

Some (bad) documentation here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html

You have to scroll down/search for "-webkit-appearance"

Upvotes: 3

Related Questions