Priyank Sharma
loading...

Resetting HTML5 Search Input in Webkit

Apr 5, 2011

[alert type=”success” close=”false” heading=”Nov 2014″]Updated the code to work with mobile Safari on iOS.[/alert]

In most browsers, the newly introduced search input renders just like the text input. However, in Webkit-based browsers like Chrome and Safari, the same is rendered with an inset border and rounded corners. This in itself becomes a consistency problem (across different browsers) when you need pixel-perfect styling. A lot of solutions out there seem to work on Safari, but they simply do not work on Chrome. So I sat down, and did a lot of experimenting with all possible code snippets available and came up with this rock-solid solution.

Include this in your CSS file to reset Webkit’s default styling.

[code]/* Reset HTML5 Search Input in Webkit */
input[type=search] {
-webkit-appearance:none;
-webkit-border-radius:0;
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
-webkit-appearance:none;
}[/code]

[custom_headline type=”left” level=”h2″ looks_like=”h5″ accent=”true”]In detail[/custom_headline]

[highlight type=”dark”]-webkit-appearance:none;[/highlight] makes sure the default rendering of Webkit is reset to make the field look like a plain text input void of any browser-level rendering. Also makes sure the superflous padding is reset even in Chrome and not just Safari.

[highlight type=”dark”]-webkit-border-radius:0;[/highlight] gets rid of rounded corners in mobile Safari on iOS.

Let me know your feedback on this!

recent posts
Apr 5, 2011
Apr 5, 2011
Apr 5, 2011