Question

如何在选择中删除那个可怕的双箭头？我找到的关于这篇文章的任何其他回答都不起作用。＆lt; div class =“form-group”＆gt; ＆lt; label for =“date”＆gt; Date＆lt; / label＆gt; ＆lt; div class“row”＆gt; ＆lt; div class =“col-5”＆gt; ＆LT;输入.....＆GT; ＆LT; / DIV＆GT; ＆lt; div class =“col-7”＆gt; ＆lt; div class =“input-group”＆gt; ＆lt; select class =“custom-select”＆gt; ＆LT;选项.....＆GT; ＆LT; /选择＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; 图片：我试过这些解决方案：如何删除Bootstrap 4中的下拉箭头？从Bootstrap 3中的表单元素中删除箭头选择删除下拉箭头如何在boostrap中替换箭头下拉选择更改下拉箭头的颜色和外观但不行。

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

希望这有帮助

Answer 2

将css更改为：

.custom-select{
   background:#fff;
}

Answer 3

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

.custom-select {
  background: none;
}

Answer 4

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

请确保您调整填充以减少分配给下拉箭头的空白，否则文本将被裁剪为看似空白的空间。

.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中的input-group <select>箭头？

4 个答案: