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

Question

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

图片：

我尝试了这些解决方案：

Remove arrows from form element select in Bootstrap 3
Select removing dropdown arrow
How to replace arrow dropdown select in boostrap
Change color and appearance of drop down arrow

但不起作用。

Answer 1

将css更改为：

.custom-select{
   background:#fff;
}

Answer 2

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

.custom-select {
  background: none;
}

Answer 3

如果您只想删除箭头，您应该为 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>

希望对您有所帮助

Answer 4

如上所述，最好使用 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>

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

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

html

css

html-select

twitter-bootstrap

bootstrap-4