HTML5 WebKit Search Input

Chris Coyier posted an in-depth article going into new HTML5 input type to appease your curiosity. The HTML5 specifications 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 […]

Chris Coyier posted an in-depth article going into new HTML5 input type to appease your curiosity. The HTML5 specifications 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:

<input name="s" type="search">
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 */
}

With following can be styled in an HTML5 search input:

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 also discovered a 'results' parameter that can be used on Webkit but is not in the HTML5 spec:

<input name="s" type="search" results="5">

Final, result:

[Source: 1, 2]