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

Question

I want to have a nice little icon that, when clicked will clear the text in the <INPUT> box.

This is to save space rather than having a clear link outside of the input box.

My CSS skills are weak... Here is a screenshot photo of how the iPhone looks.

Answer 1

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.

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

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".