Bootstrap input

Question

Подскажите как сделать выделение всего и кнопки тоже, а то как-то не красиво

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<form class="my-auto w-100 d-inline-block">
  <div class="input-group">
    <input type="text" class="form-control search-input" placeholder="Поиск по магазину...">
    <span class="input-group-append">
      <button class="btn search-btn" type="button">
        <i class="fa fa-search text-dark"></i>
      </button>
    </span>
  </div>
</form>

Answer 1

.position-absolute-right {
  right: 0;
  z-index: 5;
}

.input-group-append>.custom-btn {
  border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
} 

.full-rounded {
  border-radius: 1000px !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 href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<form class="mr-auto ml-auto mt-3 w-75">
  <div class="input-group position-relative">
    <input type="text" class="form-control search-input full-rounded" placeholder="Поиск по магазину...">
    <span class="input-group-append position-absolute position-absolute-right">
      <button class="btn search-btn full-rounded custom-btn" type="button">
         <i class="fa fa-search text-dark"></i>
      </button>
    </span>
  </div>
</form>

БЛОГ НА HUSL

Bootstrap input

Ответы (1 шт):