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

Of course the best approach is to use the ever-more-supported .

Anyway for a bit of coding fun I thought that it could be achieved also using the form's reset button, and this is the working result (it worths notings that cannot live other inputs but the search field with this approach, or the reset button will erase them too), no javascript needed:

form > div{
    position: relative;
    width: 200px;
}

form [type="text"] {
    width: 100%;
    padding-right: 20px;
}

form [type="reset"] {
    position: absolute;
    border: none;
    display: block;
    width: 16px;
    border-radius: 20px;
    top: 2px;
    bottom: 2px;
    right: -20px;
    background-color: #ffffd;
    padding: 0px;
    margin: 0px;
}