Input Type

The first decision to make when creating a search box is to decide to use an input type=“text” or input type=“search”.

The main differences comes in the way browsers handle them.

Some browsers show a cross icon that can be clicked to remove the search term instantly if desired (clear search).

In addition, modern browsers also tend to automatically store search terms previously entered across domains, which then come up as autocomplete options when subsequent searches are performed in search inputs on that domain.

Instructions: Focus on the search boxes below, and start typing. Notice how some browsers like Chrome & Safari add a clickable element to clear the form field.

Example

<input type="text"  placeholder="Search"  />

<input type="search"  placeholder="Search"  />

input[type="search"]::-webkit-search-cancel-button{
    -webkit-appearance: none;
    height: 1.5em;
    width: 1.5em;
    border-radius: 50em;
    background: url(../images/close.svg) no-repeat 50% 50%;
    background-size: contain;
    opacity: 0;
}

input[type="search"]:focus::-webkit-search-cancel-button{
    opacity: 1;
}

Example

Important links