Поиск ввода с иконкой Bootstrap 4 с закругленным текстовым полем - PullRequest
Новая
       13

Поиск ввода с иконкой Bootstrap 4 с закругленным текстовым полем

1 голос
/ 24 марта 2019

Мне нужно окно поиска с закругленными границами со значком поиска.

Ниже код работает, но если я классифицирую "таблетку с закругленными углами", значок отделится от текстового поля.

Как сделать текстовое поле круглым, показначок также остается внутри. 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-4 mt-5">
      <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-search"></i>
                    </button>
                  </span>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 mt-5">
      <div class="input-group">
        <input class="form-control rounded-pill 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-search"></i>
                    </button>
                  </span>
      </div>
    </div>
  </div>
</div>

Ответы [ 2 ]

1 голос
/ 24 марта 2019

Вот решение только для Bootstrap ...

Используйте утилиту отрицательного поля , чтобы сдвинуть кнопку влево: 

 <div class="input-group">
     <input class="form-control py-2 rounded-pill mr-1 pr-5" type="search" value="search">
     <span class="input-group-append">
         <button class="btn rounded-pill border-0 ml-n5" type="button">
               <i class="fa fa-search"></i>
         </button>
     </span>
 </div>

Это также работает с использованием input-group-text, или используя метод сетки col-auto, описанный в мой другой ответ : 

    <div class="row no-gutters mt-3 align-items-center">
        <div class="col-4">
            <input class="form-control border-secondary rounded-pill pr-5" type="search" value="search" id="example-search-input2">
        </div>
        <div class="col-auto">
            <button class="btn btn-outline-light text-dark border-0 rounded-pill ml-n5" type="button">
                <i class="fa fa-search"></i>
            </button>
        </div>
    </div>

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

1 голос
/ 24 марта 2019

Я не уверен на 100%, но, согласно моим исследованиям, Bootstrap 4.3.1 (последняя версия сегодня) не позволяет получить то, что вы хотите, только с предопределенными классами Bootstrap.

Вот пример с некоторыми классами CSS, которые вы можете включить в свой код, и который позволит вам получить желаемый результат. Просмотрите фрагмент! 

/* Rounded pill classes for horizontal sides */
.rounded-pill-left {
  border-top-left-radius: 50rem !important;
  border-bottom-left-radius: 50rem !important;
}
.rounded-pill-right {
  border-top-right-radius: 50rem !important;
  border-bottom-right-radius: 50rem !important;
}

/* Another classes to use */
.rounded-t-l-0 {
  border-top-left-radius: 0 !important;
}
.rounded-t-r-0 {
  border-top-right-radius: 0 !important;
}
.rounded-b-l-0 {
  border-bottom-left-radius: 0 !important;
}
.rounded-b-r-0 {
  border-bottom-right-radius: 0 !important;
}
.rounded-x-l-0 {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.rounded-x-r-0 {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-4 mt-5">
      <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-search"></i>
          </button>
        </span>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 mt-5">
      <div class="input-group">
        <input class="form-control border rounded-pill-left border-right-0" type="search" value="search" id="example-search-input">
        <span class="input-group-append">
          <button class="btn btn-outline-secondary border rounded-pill-right border-left-0" type="button">
              <i class="fa fa-search"></i>
          </button>
        </span>
      </div>
    </div>
  </div>
</div>
...