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

Example bootply with the updated styles

我建议虽然将元素包装起来并添加一个类，以免覆盖所有边界半径（除非您愿意）

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

1 个答案: