JSFiddle - React, Tailwind, and code Playground

HTML

<input class="clearable" type="text" name="" value="" placeholder="Enter a Search term" />

CSS

.clearable {
    background:url(http://i.imgur.com/z7ZSYjt.png) no-repeat right -10px center;
    border:1px solid #999;
    padding:3px 18px 3px 4px;
    /* same right-padding like offset */
    border-radius:3px;
    transition: background 0.4s;
}
.clearable.x {
    background-position: right 5px center;
}
.clearable.onX {
    cursor:pointer;
}
input[type=text]::-ms-clear { margin-right:20px }

JavaScript

var test = $('<input />').filter(function(){return getComputedStyle(this, '::-ms-clear').length != 0});
console.log(test);

function toggle(v) {
    return v ? 'addClass' : 'removeClass';
}

$(document).on('input', '.clearable', function () {
    $(this)[toggle(this.value.length)]('x');
}).on('mousemove', '.x', function (e) {
    $(this)[toggle(this.offsetWidth - 18 < e.clientX - this.getBoundingClientRect().left)]('onX');
}).on('click', '.onX', function () {
    $(this).removeClass('x onX').val('');
});