Bootstrap 4: поиск ввода x очистить поиск

Question

С последней Bootstrap 4 я пытаюсь вставить x в search input.

Я мог бы просто использовать

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

Но это не поддерживается в Firefox ...

Я пытался использовать addon и negative margins, но каким-то образом Bootstrap скрывает мою кнопку ...

<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>

Как мне показать мою кнопку xвверх внутри поля ввода выровнено вправо?

Answer 1

В документации Bootstrap есть пример, который вы можете адаптировать:https://getbootstrap.com/docs/4.1/components/input-group/#button-addons

например

<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>

Answer 2

Я думаю, что input-group-addon - это проблема.

Попробуйте:

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

Это выглядит так:

Answer 3

Это будет то же самое, что и методы , описанные здесь .

Использовать группу ввода и настроить границы.

  <div class="input-group">
        <input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
        <span class="input-group-append">
            <button class="btn btn-outline-secondary border-left-0 border" type="button">
                <i class="fa fa-times"></i>
            </button>
          </span>
  </div>

Использовать относительное положение накнопка ...

   <div class="d-flex">
         <input class="form-control py-2 bg-transparent" type="search" value="search" id="example-search-input">
         <button class="btn btn-outline-secondary border-0 btn-pos" type="button">
            <i class="fa fa-times"></i>
         </button>
   </div>

.btn-pos {
    position:relative;
    z-index:1;
    left: -36px;
}

Используйте строку со столбцами и отрегулируйте границы ..

  <div class="row no-gutters">
        <div class="col">
            <input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search" id="example-search-input4">
        </div>
        <div class="col-auto">
            <button class="btn btn-outline-secondary border-left-0 rounded-0 rounded-right" type="button">
                <i class="fa fa-times"></i>
            </button>
        </div>
  </div>

https://www.codeply.com/go/SCMW5b1DKr