How do I put a clear button inside my HTML text input box like the iPhone does?

Question

Nowadays with HTML5, it’s pretty simple:

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

Most modern browsers will automatically render a usable clear button in the field by default.

plain HTML5 search input field

(If you use Bootstrap, you’ll have to add an override to your css file to make it show)

input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

bootstrap search input field

Safari/WebKit browsers can also provide extra features when using type="search", like results=5 and autosave="...", but they also override many of your styles (e.g. height, borders) . To prevent those overrides, while still retaining functionality like the X button, you can add this to your css:

input[type=search] {
    -webkit-appearance: none;
}

See css-tricks.com for more info about the features provided by type="search".

Leave a Comment Cancel reply