Search box clear

by akshatha suchethan

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<form>
<input type="text" class="custom-search-box">
</form>

CSS

.custom-search-box{
    display:inline-block;vertical-align: bottom;
    width:30%;padding: 5px;padding-right:27px;border:1px solid #ccc;
        outline: none;
}
		.clearspace{width: 20px;display: inline-block;//height: 1.6em;margin-left:-25px;//vertical-align: middle;//overflow: hidden;
			//background: pink;
}
.clear {
    width: 20px;
    transition: max-width 0.3s;overflow: hidden;float: right;
    display: block;max-width: 0px;//height: 25px;
}

.show {
    cursor: pointer;width: 20px;max-width:20px;
}
form{white-space: nowrap;}

JavaScript

$(document).ready(function() {
$("input.custom-search-box").after('<span class="clearspace"><i class="clear fa fa-close" title="clear"></i></span>');
$("input.custom-search-box").on('keyup input',function(){
if ($(this).val()) {$(".clear").addClass("show");} else {$(".clear").removeClass("show");}
});
$('.clear').click(function(){
    $('input.custom-search-box').val('').focus();
    $(".clear").removeClass("show");
});
});