如何删除输入组<select>引导程序 4 中的箭头? [英] How to remove input-group <select> arrow in bootstrap 4?

查看：35
本文介绍了如何删除输入组<select>引导程序 4 中的箭头?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何删除 select 中那个看起来很可怕的双箭头?我发现的关于这篇文章的任何其他回答都不起作用.

 
<label for="date">日期</label><div类行"><div class="col-5"><输入.....>
<div class="col-7"><div class="input-group"><选择类=自定义选择"><选项.....></选择>

图片:

我尝试了这些解决方案:

但不起作用.

解决方案

如果您只是想删除箭头，则应在设置这些箭头时为 custom-select 类强制应用背景样式作为背景.试试下面的代码作为参考.

.custom-select{背景:无！重要；}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="样式表"/><div class="form-group"><label for="date">日期</label><div类行"><div class="col-5"><输入.....>

<div class="col-7"><div class="input-group"><选择类=自定义选择"><选项.....></选择>

希望能帮到你

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>

Image:

I tried those solutions:

but not works.

解决方案

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>

Hope this helps

这篇关于如何删除输入组&amp;lt;select&gt;引导程序 4 中的箭头?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆