使引导选择列表透明答案

【问题标题】：Make a bootstrap selection list transparent使引导选择列表透明
【发布时间】：2021-12-15 06:55:28
【问题描述】：

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

HTML - 使用带有 Bootstrap 表单组的标准选择列表和带有自定义国家/地区的表单控件（我不知道如何透明地执行此选择列表）

        <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 标签构建自定义选择列表。

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

【问题讨论】：

您是否尝试过在 CSS 中使用 background: 而不是 background-color？我确实认为标准 Bootstrap 样式使用 background，因此更改 background-color: 可能不会有太大变化。您也可以尝试在 CSS 中为背景赋予 RGBA 颜色并以这种方式使其透明？或半透明等。

标签： html css twitter-bootstrap bootstrap-4 drop-down-menu

【解决方案1】：

Bootstrap 4 和 5 有一个 .bg-transparent 类，您应该可以将其添加到 .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，所有背景类都应该已经有 !important 并且应该覆盖默认的 .dropdown-menu CSS。

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

【讨论】：