使 bootstrap 选择列表透明

Question

是否可以制作标准的select透明背景离子列表？请看两个例子。我知道可以构建“自定义”selection 列表并使其背景透明，但是可以使用 select 元素吗？

HTML - 使用带有 Bootstrap 表单组的标准 select 列表和带有自定义国家/地区的表单控件（我不知道该怎么做 select列表透明)

        <div class="form-group">
            <select class="form-control form-control-lg countrylist">
                <option selected>Choose...</option>
                <option>Nigeria</option>
                <option>Sweden</option>
                <option>Poland</option>
                <option>Spain</option>
            </select>
        </div>

HTML - 使用 li、a 和 ul 标签构建自定义 select 离子列表。

<li class="dropdown nav-item">
    <a data-toggle="dropdown" class="dropdown-toggle nav-link js-scroll-trigger">Clientes</a>
    <ul class="dropdown-menu">
        <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#">2ª via do boleto </a></li>
        <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#">Atendimento </a></li>
        <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#">Seja um revendedor </a></li>
        <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#"> Depoimentos </a></li>
        <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#">2ª via do boleto </a></li>
        <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#">Atendimento </a></li>
        <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#">Seja um revendedor </a></li>
    </ul>
</li>

CSS

.countrylist .dropdown-menu {
  background-color: transparent !important;
}

Answer 1

Bootstrap 4 和 5 有一个 .bg-transparent class，您应该可以将其添加到 .dropdown-menu 元素以将背景设置为透明（https://getbootstrap.com/docs/5.1/utilities/background/).

即

<ul class="dropdown-menu bg-transparent">
        <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#">2ª via do boleto </a></li>
        <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#">Atendimento </a></li>
        <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#">Seja um revendedor </a></li>
        <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#"> Depoimentos </a></li>
        <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#">2ª via do boleto </a></li>
        <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#">Atendimento </a></li>
        <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#">Seja um revendedor </a></li>
    </ul>

假设你没有改变 sass $enable-important-utilities var 所有背景 classes 应该已经有 !important 并且应该覆盖默认值 .dropdown-menu CSS.

您可能还想使用 dropdown-menu-dark|light class 和背景 class 来更改下拉菜单样式。

使 bootstrap 选择列表透明

Make a bootstrap selection list transparent

html

css

twitter-bootstrap

drop-down-menu

bootstrap-4