Benny Sutton is 4 hire - just click here

Pure CSS Clearable Input

Makes an input clearable by showing an x on the r/h side when text is entered - you can click the X to reset the input

             
.clearable {
    background: #333 url('/img/XR.gif') no-repeat right -10px center;
    border: 1px solid #999;
    padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
    border-radius: 3px;
    transition: background 0.4s;
}

    .clearable.x {
        background-position: right 5px center;
    }
    /* (jQ) Show icon */
    .clearable.onX {
        cursor: pointer;
    }
    /* (jQ) hover cursor style */
    .clearable::-ms-clear {
        display: none;
        width: 0;
        height: 0;
    }