如何在Bootstrap 4中去掉input-group中<select>的箭头？

Question

如何在Bootstrap 4中去掉input-group中<select>的箭头？

htmlcsstwitter-bootstrapbootstrap-4html-select

6

我该如何移除下拉菜单中那个讨厌的双箭头？我在这篇文章中找到的其他答案都无法解决问题。

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

图片：

我尝试了这些解决方案：

但都没有起作用。

- Ondřej Javorský

4个回答

1

将以下内容添加到您的 CSS 文件中：

.custom-select {
  background: none;
}

- trueChazza

0

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

- gordonC

0

将 CSS 更改为：

.custom-select{
   background:#fff;
}

- Rasmus Stougaard

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rajan Benipuri · Accepted Answer

如果您只想删除箭头，您应该强制应用背景样式到您的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>

希望这可以帮助到您。