Make a bootstrap selection list transparent-CodePudding

Is it possible to make a standard selection list with transparent background? Please see two example. I know its possible to build a "custom" selection lists and make it transparent background, but is it possible to use a select element?

HTML - using standard select list with Bootstrap form-group and form-control with custom country (I do not know how to do this select list transparent)

        <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 - Using li, a and ul tags to build a custom selection list.

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

CodePudding user response：

Bootstrap 4 & 5 have a .bg-transparent class which you should be able to add to the .dropdown-menu element to set the background to transparent (https://getbootstrap.com/docs/5.1/utilities/background/).

ie.

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

Assuming you haven't altered the sass $enable-important-utilities var all background classes should already have !important & should override the default .dropdown-menu CSS.

You might also want to use the dropdown-menu-dark|light classes along with the background classes to change up the dropdown styles.