Hide bootstrap's .dropdown-backdrop, CSS only
Found solution: .dropdown-backdrop is a descendant of its .dropdown, which can have a unique ID, so simply using display:none;
in CSS works fine, as in:
#firstDropdown .dropdown-backdrop {
display:none;
}
And then all other dropdowns (except #firstDropdown) will still have a backdrop as normal.
See JSFiddle updated.
sqsinger
I am a full-stack web developer working in Santa Monica, CA. I have also worked in Toronto, Philadelphia, and Boston. For me, UX design is the most interesting aspect of many projects - I love building beautiful user experiences that allow people to do great things with software.
Updated on June 30, 2022Comments
-
sqsinger almost 2 years
Is it possible to hide Bootstrap's .dropdown-backdrop element for a certain dropdown (not all on the page) by using CSS only?
I've determined that this is possible using Javascript, with JSFiddle here. However, I would like to accomplish this without using additional JS if possible.
<!-- First dropdown: no backdrop --> <div id="firstDropdown" class="dropdown"> <button class="btn-dropdown-add btn btn-blue" data-toggle="dropdown"> First Dropdown ▼ </button> <ul class="dropdown-menu" role="menu"> <li><a class="a_dropdown_item" href="#business">Business</a></li> <li><a class="a_dropdown_item" href="#my-events">Event</a></li> </ul> </div> <!-- Second dropdown: yes backdrop --> <div id="secondDropdown" class="dropdown"> <button class="btn-dropdown-add btn btn-blue" data-toggle="dropdown"> Second Dropdown ▼ </button> <ul class="dropdown-menu" role="menu"> <li><a class="a_dropdown_item" href="#business">Business</a></li> <li><a class="a_dropdown_item" href="#my-events">Event</a></li> </ul> </div> <script type="text/javascript"> // Hide backdrop from #firstDropdown. // This can be done with JS as below. Can it be done with only CSS? $('#firstDropdown').on('show.bs.dropdown', function () { $(".dropdown-backdrop").hide(); }); </script>