如何在引导程序 4 中删除输入组 <select> 箭头？答案

【问题标题】：How to remove input-group <select> arrow in bootstrap 4?如何在引导程序 4 中删除输入组 <select> 箭头？
【发布时间】：2018-08-21 02:03:39
【问题描述】：

如何删除 select 中那个可怕的双箭头？ 我发现的关于这篇文章的任何其他回答都不起作用。

    <div class="form-group">
      <label for="date">Date</label>
      <div class"row">
        <div class="col-5">
          <input.....>
        </div>
        <div class="col-7">
          <div class="input-group">
            <select class="custom-select">
              <option.....>
            </select>
          </div>
        </div>
      </div>
    </div>

图片：

我尝试了这些解决方案：

但不起作用。

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4 html-select

【解决方案1】：

如果您只是想删除箭头，则应强制为 custom-select 类应用背景样式，因为这些箭头已设置为背景。试试下面的代码作为参考。

.custom-select{
background: none !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
      <label for="date">Date</label>
      <div class"row">
        <div class="col-5">
          <input.....>
        </div>
        <div class="col-7">
          <div class="input-group">
            <select class="custom-select">
              <option.....>
            </select>
          </div>
        </div>
      </div>
    </div>

希望对你有帮助

【讨论】：

感谢您的回答。我什至不知道那些箭头是select的背景。您的解决方案有效。
很高兴它有帮助。接受它作为答案，以便它可以帮助其他人。
background: none 也会移除颜色。使用背景图像：无；这样它就不会反映背景颜色。

【解决方案2】：

将此添加到您的 CSS 文件中：

.custom-select {
  background: none;
}

【讨论】：

【解决方案3】：

把css改成：

.custom-select{
   background:#fff;
}

【讨论】：

【解决方案4】：

如上所述，最好使用 background-image: none。我添加了字段，以便您查看效果。

确保调整填充以减少为下拉箭头分配的空白，否则文本将剪辑在看似空白的空间中。

.custom-select{
background-image: none !important;
padding-left: 10px !important;
padding-right: 10px !important;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
      <label for="date">Date</label>
      <div class"row">
        <div class="col-3">
          <input type="text" placeholder="some text">
        </div>
        <div class="col-10">
          <div class="input-group">
            <select class="custom-select">
              <option>Sample text</option>
              <option>Second text</option>
            </select>
          </div>
        </div>
      </div>
    </div>

【讨论】：