Searching for the HTML5 Search Input

I recently saw the new HTML5 Search input element and wondered what the heck it does:

HTML:
<input name="s" type="search" />
 

Chris Coyier has posted an in-depth article going into this new HTML5 input type to appease your curiosity. The HTML5 spec actually says you don't have to do much with it, but Webkit actually has a range of options.

First, it visually distinguishes the input field with an inset border, rounded corners, and typographic controls:

Chris has discovered that you actually can't override the following visual properties on a search input with CSS:

CSS:
input[type=search] {
  padding: 30px;            /* Overridden by padding: 1px; */
  font-family: Georgia;     /* Overridden by font: -webkit-small-control; */
  border: 5px solid black/* Overridden by border: 2px inset; */
  background: red;          /* Overridden by background-color: white; */
  line-height: 3;           /* Irrelevant, I guess */
}
 

However, the following can be styled in an HTML5 search input:

CSS:
input[type=search] {
  color: red;
  text-align: right;
  cursor: pointer;
  display: block;
  width: 100%;
  letter-spacing: 4px;
  text-shadow: 0 0 2px black;
  word-spacing: 20px;
}
 

Chris (via Mike Taylor) also discovered a 'results' parameter that can be used on Webkit but is not in the HTML5 spec:

HTML:
<input name="s" type="search" results="5" />
 

which gives a drop down with the number of results requested: