在 Bootstrap 4 中自定义 .input-group-append

Question

有人可以告诉我如何为.input-group-append 类自定义border-radius 吗？

我正试图纠正这个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;
}

Example bootply with the updated styles

我会建议包装元素并添加一个类，这样您就不会覆盖所有边框半径（除非您愿意）