利用bootstrap的icon给input标签添加具有清空功能的图标【也可以用Font Awesome图标替代】

css代码：

#clear-input-value {
	width: 30px;
	height: 30px;
	position: absolute;
	z-index: 100;
	cursor: pointer;
	display: inline-block;
	display: none;
	justify-content: center;
	align-items: center;
}

页面代码：

<div class="input-group" id="input-wrapper">
     <input type="text" id="list_input" placeholder="ID、概述、人员" class="input input-sm form-control">
     <span class="glyphicon glyphicon-remove-circle" id="clear-input-value" onclick="clearInputValue()"></span>                       
</div>

JS代码【里面用到了Jquery，也可以用JS替代】：

$('#input-wrapper').hover(function() { // 鼠标悬浮时触发
	  if($.trim($('#list_input').val()) != ''){ // input框中有值
		  $('#clear-input-value').css('display', 'flex')
	  }else {
		  $('#clear-input-value').css('display', 'none') // input框中没有值
	  }
  }, function() { // 鼠标离开时触发
	 $('#clear-input-value').css('display', 'none')
  })
  // input change
  $("#input-wrapper input").bind("input propertychange",function () {
	  if($.trim($('#list_input').val()) != ''){ // input框中有值
		  $('#clear-input-value').css('display', 'flex')
	  }else {
		  $('#clear-input-value').css('display', 'none') // input框中没有值
	  }
  })
 /**
 * 清空input框中的值
 * @returns
 */
function clearInputValue() {
	$('#list_input').val('')
	$('#clear-input-value').css('display', 'none')
}