Search inputs

Search inputs

Search inputs are a new HTML type that is styled with pill-shaped corners and adds a "x" icon to clear the field once you start typing. Start with an input with a type="search" attribute in your markup.

Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.

<div data-role="fieldcontain">
    <label for="search">Search Input:</label>
    <input type="search" name="password" id="search" value="" />
</div>

The search input is displayed like this:

Themed variation: