Bootstrap 4: search input x clear search [duplicate]

Question

With the latest Bootstrap 4, I am trying to put an x in a search input.

I could simply use

<input type="search" placeholder="Search..." />

But this is not supported in Firefox...

I've tried using addon and negative margins, but somehow the Bootstrap hides my button...

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search...">
        <div class="input-group-addon">
          <button class="btn bg-transparent">
            <i class="fa fa-times"></i>
          </button>
        </div>
</div>

How can I have my x button show up inside the input box aligned right?

Answer 1

I think that input-group-addon is the problem.

Try this:

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search...">
    <button type="button" class="btn bg-transparent" style="margin-left: -40px; z-index: 100;">
      <i class="fa fa-times"></i>
    </button>
</div>

This looks like this:

Answer 2

There's an example in the Bootstrap documentation that you could adapt:
https://getbootstrap.com/docs/4.1/components/input-group/#button-addons

e.g.

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="button-addon2">X</button>
  </div>
</div>