如何删除输入组< select>引导程序4中的箭头?

问题描述

我该如何删除select中那个看上去很恐怖的双箭头?我发现有关本文的任何其他疑问均不起作用.

How can i remove that horrible looking double arrow in select ? Any other answears about this article that i found doesn't work.

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

图片:

我尝试了这些解决方案:

I tried those solutions:

• 如何在Bootstrap中删除下拉菜单中的箭头4?
• 从Bootstrap 3中的表单元素中删除箭头
• 选择删除下拉箭头
• 如何替换boostrap中的箭头下拉菜单
• 更改下拉箭头的颜色和外观

• How to remove the arrow in dropdown in Bootstrap 4?
• 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

但不起作用.

推荐答案

如果只想删除箭头，则应为custom-select类强制应用背景样式，因为这些箭头被设置为背景.请尝试以下代码作为参考.

If you simply want to remove the arrows, you should force apply background style for your custom-select class as those arrows are set as background. Try the below code as reference.

.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>引导程序4中的箭头?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！