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

Posted

技术标签:

【中文标题】如何在引导程序 4 中删除输入组 <select> 箭头?【英文标题】:How to remove input-group <select> arrow in bootstrap 4? 【发布时间】:2018-08-21 02:03:39 【问题描述】:

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

图片:

我尝试了这些解决方案:

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

但不起作用。

【问题讨论】:

【参考方案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>

希望对你有帮助

【讨论】:

感谢您的回答。我什至不知道那些箭头是select的背景。您的解决方案有效。 很高兴它有帮助。接受它作为答案,以便它可以帮助其他人。 background: none 也会移除颜色。使用背景图像:无;这样它就不会反映背景颜色。【参考方案2】:

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

.custom-select 
  background: none;

【讨论】:

【参考方案3】:

把css改成:

.custom-select
   background:#fff;

【讨论】:

【参考方案4】:

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

【讨论】:

以上是关于如何在引导程序 4 中删除输入组 <select> 箭头?的主要内容,如果未能解决你的问题,请参考以下文章

如何在引导程序 4 中删除轮廓

使用引导程序在表单组中设置输入/文本区域的宽度

Bootstrap 输入组从 col-XX-X 中删除填充

Kendo 小部件和引导输入组插件

带引导选择的输入组插件

如何将复选框附加到按钮组? (引导程序3)