使引导选择列表透明

Question

是否可以制作一个透明背景的标准选择列表?请看两个例子。我知道建立一种"习惯"是可能的。选择列表并使其成为透明背景，但是可以使用选择元素吗?

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

Answer 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-utilitiesvar所有的背景类应该已经有!important&应该覆盖默认的.dropdown-menuCSS。

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