Position clear button in bootstrap input field

Question

I\'m trying to position a clear button inside an input field, at the right before to the search icon, however it\'s not working; the \"x\" is displayed in front of the input

Answer 1

A little update to get what you want:

input {
    /* Avoid use typing under the clear button. */
    padding-right: 30px !important; 
}

.input-group-btn {
  position: relative;  
  /* This avoid the "clear" button being hidden while 
     the input has focus on. */
  z-index: 1000;
}

.input-group-btn a.btn {
   position: absolute;
   right: 38px;
   top: 0px;
}

/* This avoid the bad effect when clicking the button. */
.input-group-btn a.btn:hover,
.input-group-btn a.btn:active {
   box-shadow: none; 
}

I added position: relative to input-group-btn for position: absolute to work on the close button. Then just a negative right: 36px to move the button in the input field.

I put the close button inside the input-group-btn because it was easier for me, and it automatically takes care of the vertical alignment of your button (I just added the btn class to the a tag).

I added padding-left: 30px !important to the input field to avoid user typing under the x button. To have a symmetrical space, you would need 38px, but it looks a bit much... You can change this value at your discretion to get the result you want.

Since the a tag is inside the input-btn-group with the btn class, you need something like a:hover { box-shadow: none ; } to avoid ugly box-shadow in your input when clicking on the close button.