So I’m building an item search engine for a project I’ve been working on, and recently decided to switch the input type from “text” to the new “search” type added in the HTML5 spec. Initially I was using the following code:

 <input type="text" id="item_search" name="item_search" value="Search Items" /> 

Which produced a search field that looked like this in Chrome:

But, as soon as I changed the input type, like so...

 <input type="search" id="item_search" name="item_search" value="Search Items" /> 

Chrome started giving me this:

Obviously not the result I was looking for. But, after a bit of Googling, I stumbled on the -webkit-appearance setting that resets most of the default styles. I also set outline to none to remove the automatic highlighting Webkit applies on focus. The result is the following css code:

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

Now I was getting this:

Better, but still not quite right. However, I couldn't find anywhere that mentioned how to get rid of the little "x" icon. But, after a little digging around using Chrome's Developer Tools, I finally found the -webkit-search-cancel-button setting. That was the final pice to the puzzle. Here's the final CSS to reset the search input styles:

 input[type="search"] {
   -webkit-appearance: none;
   outline:none;
 }
 input[type="search"]::-webkit-search-cancel-button {
   display: none;
 } 

Finally, this brings us back to where we were at to begin with: