How to reset the Webkit HTML5 search field style with CSS
by Glyn Mooney
I’ll keep this one short and snappy! I just ran into an issue where the new HTML5 search field would take the browser default styles over what I had defined. With a little Googling around and some tweaks, I came up with the following:
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
display: none;
}
input[type=search] {
/* the webkit overrides need to stay at the top */
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
/* your styles here */
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
display: none;
}
input[type=search] {
/* the webkit overrides need to stay at the top */
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
/* your styles here */
}
Hope this helps someone! Leave a comment, if you know a better way and I’ll update the article!
Great tip. But somehow, this doesn’t properly render in Crome. I’m using version 11 beta. Maybe, works on the stable one perhaps?
Sorry for double post, but this seems to be working perfectly for me:
input[type="search"]::-webkit-search-decoration {
display:none;
}
input[type="search"] {
-webkit-appearance:textfield;
-webkit-box-sizing:content-box;
}
Which OS are you using?
Great, this
`-webkit-box-sizing:content-box;` was the missing piece of the puzzle for me, older posts from 2011 didn’t mention it so maybe this is something new.
Webkit is like the new IE or what? How do they expect us to be semantic when they take the freedom of expression in design.
Thanks for the feedback :)
[...] Webkit’s bizarre search input styling by Glyn [...]
Brilliant tip, thanks :)
Not a problem :) Thanks for the comment!
[...] reference on the HTML5 placeholder attributeResetting Webkit’s bizarre search input styling by Glyn MooneyPart 5: CSS3 Dropdown MenuWe’re now going to use a classic approach to building [...]
Thanks! Works like a charm!
Glad to hear it :)
Thanks. There were some terrible Apple products (iPhone & iPad) ravaging our CSS by imposing their own style on our input fields, and this helped me to shut that crap down.
You’re welcome :) Webkit does get in the way sometimes. I should really extend this article to cover all the quirks and variations!