WebKit HTML5 Search Inputs

One of the new types of inputs in HTML5 is search.

<input type=search name=s>

It does absolutely nothing in most browsers. It just behaves like a text input. This isn’t a problem. The spec doesn’t require it to do anything special. WebKit browsers do treat it a bit differently though, primarily with styling.

A search input in WebKit by default has an inset border, rounded corners, and strict typographic control.

The Styling Limitations

WebKit has big time restrictions on what you can change on a search input. I would guess the idea is consistency. In Safari particularly, search fields look just like the search box in the upper right of the browser. The following CSS will be ignored in WebKit “no matter what”, as in, you can’t even fight against it with !important rules.

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 */
}

In other words, be extremely cautious about using any of those CSS properties on a search input unless you are OK with the search input looking very different in other browsers.

Allowed styling

The following CSS works as expected. The last three, in my opinion, should probably locked in like the properties above as styling those properties almost always looks worse than if you didn’t.

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;               
}

Busted styling

Be careful not to use text-indent on search inputs. The results are quite weird and inconsistent. Here is one example:

Sometimes the text is below like this. Sometimes it’s not visible at all. It appears to be related to elements around it as well as how much indent it has (low values sometimes work fine).

Show Previous Searches

This isn’t documented anywhere that I know of nor is it in the spec, but you if you add a results parameter on the input, WebKit will apply a little magnifying glass with a dropdown arrow showing previous results. (Thanks to Mike Taylor)

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

The integer value you give the results attribute is how many recent searches will appear in this dropdown, if there are that many.

I really like the little magnifying glass. It drives home the searchyness of the field, but I’m calling the functionality itself rather janky. On a page reload recent searches clears, so that dropdown will almost always say “No recent searches”, unless you have implemented some kind of Ajax search (and even that I haven’t really tested).

Update: You can use the autosave parameter to persist the values in the dropdown menu across page loads.

<input type=search results=5 autosave=some_unique_value name=s>

Size Restrictions

There are only three different “sizes” that WebKit search inputs can be, and it is determined by the font-size you declare on them.

This small, medium, and large business can be extremely frustrating, as even setting identical font values, at the minimum for a “bump”, you’ll see font size difference across browsers.

Notice the (x) on the right hand side of the search inputs on the WebKit side. That is an additional feature of these search inputs in WebKit. If the input has any value (not a placeholder, a real value) the (x) will be present which is a functional UI control for clearing the input.

Speaking of placeholder text, search inputs are a great candiate for that.

<input type=search results=5 placeholder=Search... name=s>

And in case light gray isn’t your cup of tea, you can style the placeholder text:

::-webkit-input-placeholder {
  color: orangered;
}

View Demo

Styling Search Graphical Widgets

For instance, the little (x) button that shows when you have text entered into a search input. That can be styled by first removing the -webkit-appearance on the special pseudo-like-element (are we calling them that?) and then applying your own styling:

input[type="search"]::-webkit-search-cancel-button {

  /* Remove default */
  -webkit-appearance: none;
    
  /* Now your own custom styles */
  height: 10px;
  width: 10px;
  background: red;
  /* Will place small red box on the right of input (positioning carries over) */

}

Special JavaScript Events on Search Inputs

I’ll update this when I have more information, but for now, I saw this comment on Ajaxian from “maccman”:

There are also some custom events too – such as ’search’ which fires when the user pauses typing (set ‘incremental’ to true).