The search Type

Live Demo

Firefox 3.6	Firefox 4	Safari 5	Safari iOS 4	Chrome 6+	Opera 10.6+	IE 10	IE 10 PP2	Android 2.3

The Low Down

The search input type is used to designate the input as being used for search.

• Support is a bit arbitrary here as the spec doesn’t require any special treatment for search fields. Android doesn’t do anything special though, where all other browsers do.
• The results and autosave attributes shown above are not standard. In WebKit and Blink browsers you can add the non-standard resultsattribute to get a looking glass icon to click to see the latest searches, and autosave to keep them across page loads.
• Safari, Opera and Chrome (on OS X) round the corners of search inputs. These same browsers on Windows do not round the corners of the inputs. Presumably the OS X rounding is to match the look of search inputs in the operating system (Finder windows). Firefox and IE do not round corners.
• When a value is present, a gray x control shows up on the right of the input in IE, Chrome, Safari and Opera (but not Firefox or Chrome on Android) which can be clicked to clear the value. IE includes this x in non-search controls as well.
• WebKit’s special styling prevents some CSS attributes from functioning as expected: padding, font stuff (only three allowable font-sizes), border, background… You can remove special styling and limitations and return the look back to a regular text input with:

-webkit-appearance: none;

• Falls back to a regular text input.
• More info here, including font-size limitations.
• Use case: combine with datalist to help users with common search terms.
• In Chrome 17 (or possibly before, but not as early as 13), you get a dropdown menu of past searches when the field comes into focus.