如何删除 bootstrap 4 中的输入组 <select> 箭头?

How to remove input-group <select> arrow in bootstrap 4?

如何删除 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>

图片:

我尝试了这些解决方案:

但不起作用。

将css更改为:

.custom-select{
   background:#fff;
}

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

.custom-select {
  background: none;
}

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

.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>

希望对您有所帮助

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

确保调整内边距以减少分配给下拉箭头的白色space,否则文本会被裁剪成看似空的space。

.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>