Resetting HTML5 Search Input in Webkit

Priyank Sharma Code Snippets 12 Comments

Nov 2014
Updated the code to work with mobile Safari on iOS.

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.

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

In detail

-webkit-appearance:none; 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.

-webkit-border-radius:0; gets rid of rounded corners in mobile Safari on iOS.

Let me know your feedback on this!

Comments 12

    1. Post
      Author
  1. Pingback: HTML5 'search' input type für Webkit-Browser stylen | agoradesign KG

    1. Post
      Author
    1. Post
      Author
    1. Post
      Author
  2. I am using the html5 tag in Chrome, but Chrome v35+ no longer renders the rounded corners or text inset or any kind of styling. It looks like a plain text box. Does anyone know what happened and how it can be fixed? Thanks

    1. Post
      Author

Leave a Reply

Your email address will not be published. Required fields are marked *