<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-3 right-border-pad"><input type="text" class="form-control custom-input" placeholder="Enter any thing" onblur="ToggleCrossIcon(this,false)", onfocus="ToggleCrossIcon(this,true)" /><span class="my-cross fa fa-times" aria-hidden="true" onclick="ClearTextValue(this)">x</span></div> </div> </div>

.my-cross{ position: absolute; right: 15px; top: 50%; background: #137fb0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); border-radius: 50%; padding: 2px; width: 20px; height: 20px; text-align: center; line-height: 16px; display:none; cursor:pointer;}

function ClearTextValue(ctrl) { $(ctrl).prev().val(""); } function ToggleCrossIcon(ctrl, isShow) { if (isShow) $(ctrl).next().show(); else setTimeout(function(){ $(ctrl).next().hide(); },300) }