Posted by & filed under BootStrap, Web Design.

By default, Internet Explorer 10 and 11 show an ‘X’ button (clear button) at the edge of non-empty text input. In this post, we’ll add such button for input group component in Bootstrap 3. It will look something like the following screenshot:

Clear Button in Bootstrap Input Group


We use Bootstrap feedback icon and add 2 our custom CSS classes (.has-clear and.form-control-clear) as highlighted below.

<div class="input-group">
  <div class="form-group has-feedback has-clear">
    <input type="text" class="form-control" id="exampleInput1" placeholder="Enter text here">
    <span class="form-control-clear glyphicon glyphicon-remove form-control-feedback hidden"></span>
  <span class="input-group-btn">
    <button type="button" class="btn btn-primary" id="exampleButton1">Search</button>


Hide Internet Explorer default clear button using the ::-ms-clear CSS pseudo-element.

::-ms-clear {
  display: none;

.form-control-clear {
  z-index: 10;
  pointer-events: auto;
  cursor: pointer;


$('.has-clear input[type="text"]').on('input propertychange', function() {
  var $this = $(this);
  var visible = Boolean($this.val());
  $this.siblings('.form-control-clear').toggleClass('hidden', !visible);

$('.form-control-clear').click(function() {

Comments are closed.