Resetting HTML5 Search Input in Webkit
[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 */
[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!