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

This is to save space rather than having a clear link outside of t

Answer 1

@thebluefox has summarized the most of all. You're only also forced to use JavaScript to make that button to work anyway. Here's an SSCCE, you can copy'n'paste'n'run it:

Live example here.

jQuery is by the way not necessary, it just nicely separates the logic needed for progressive enhancement from the source, you can of course also go ahead with plain HTML/CSS/JS:

You only ends up with uglier HTML (and non-crossbrowser compatible JS ;) ).

Note that when the UI look'n'feel isn't your biggest concern, but the functionality is, then just use instead of . It'll show the (browser-specific) clear button on HTML5 capable browsers.