Input clear

clearing input with an inner x image

by Joseph Tate

HTML

<input type="text" name="search" id="search" value="I can be cleared" /><a href="search/clear" id="clear">Clear results</a>

CSS

* {
    font-family: Segoe UI;
    font-site: 9pt;
}

#search {
    padding: 3px 24px 3px 3px;
}

#clear {
    text-indent: -1000em;
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url(http://p.yusukekamiyamane.com/icons/search/fugue/icons/cross.png);
    background-repeat: no-repeat;
    position: relative;
    left: -20px;
    top: 3px;
}

JavaScript

$("#clear").click(function(evt){
    evt.preventDefault();
    alert("Clear results");
    $("#search").val("").focus();
//    $.ajax({
//        type: "GET",
//        url: "/search/clear",
//        success: function(data, status, xhr){
//        },
//        error: function(xhr, status, err){
//        }
//    });
});