настройка .input-group-append в Bootstrap 4

Question

Может кто-нибудь сообщить мне, как я могу настроить border-radius для класса .input-group-append?

Я пытаюсь изогнуть кривые на этом input-group.

Я не могу найти ничего полезного в документации.

Я гуглил и пробовал разные решения, но безуспешно.

Ниже мой html и .css

это мой HTML

<div class="row" id="searchfilter">

<!--- Calendar Selection -->

    <div class="col-lg-12 col-md-12 col-12 input-group input-group-sm input-daterange">
      <select id="selector" class="form-control" data-live-search="true" title="searchFilter">
               <option>option1</option>
               <option>option2</option>
               <option>option3</option>
               <option>option4</option>
               <option>option5</option>
           </select>
      <div class="input-group-prepend">
        <span class="input-group-text">from </span>
      </div>
        <input id="startDate1" name="startDate1" data-label="from-date" type="text" class="form-control" />
          <div class="input-group-append">
          <span class="input-group-text">
            <i class="fa fa-calendar" aria-hidden="true"></i>
          </span>
        </div>

        <div class="input-group-prepend">
          <span class="input-group-text">to </span>
        </div>
        <input id="endDate1"name="endDate1" data-label="to-date" type="text" class="form-control" />
          <div class="input-group-append">
          <span class="input-group-text">
            <i class="fa fa-calendar" aria-hidden="true"></i>
          </span>
        </div>
    </div>

</div>  <!-- Row searchFilter -->

и соответствующая часть .SCSS здесь.

#searchFilter{
  margin-top: 20px;
   select, input{
     border-radius: 0px !important;
   }
.input-group-append, .input-group-prepend{
     border-radius: 0px !important;
   }
}

Answer 1

если вы осмотрите элемент с радиусом, вы увидите следующий стиль:

.input-group-sm>.custom-select,
.input-group-sm>.form-control,
.input-group-sm>.input-group-append>.btn,
.input-group-sm>.input-group-append>.input-group-text,
.input-group-sm>.input-group-prepend>.btn,
.input-group-sm>.input-group-prepend>.input-group-text {
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
  border-radius: .2rem;
}

Итак, чтобы переопределить, вы можете сделать

.input-group-sm>.custom-select,
.input-group-sm>.form-control,
.input-group-sm>.input-group-append>.btn,
.input-group-sm>.input-group-append>.input-group-text,
.input-group-sm>.input-group-prepend>.btn,
.input-group-sm>.input-group-prepend>.input-group-text {
  border-radius: 0;
}

Пример bootply с обновленными стилями

Я бы предложил обернуть элементы и добавить класс, чтобы не перекрывать все радиусы границ (если вы этого не хотите)