如何移除Bootstrap下拉菜单点击空白区域时的背景高亮效果

问题出在你用了<p class="dropdown-item">包裹复选列表，Bootstrap的.dropdown-item类默认带有:hover和:focus状态的蓝色背景样式，点击空白区域时会触发这个样式。

你可以通过以下两种方式解决：

方法1：移除错误的.dropdown-item类 #

把包裹复选框的<p class="dropdown-item">替换成普通容器（比如div），避免继承下拉项的交互样式：

<style>     
    .dropdown-menu {
        max-height: 500px;
        max-width: 300px;
        overflow-y: scroll;
    }

    /* 自定义复选框区域的字体样式，替代原来dropdown-item的设置 */
    .dropdown-list-container {
        font-size: 30px;
        font-family: 'Times New Roman';
        padding: 0.5rem 1rem; /* 保持和dropdown-item一致的内边距，布局更协调 */
    }
</style>

<div class="dropdown">
   <button class="btn btn-outline-dark btn-lg dropdown-toggle" style="font-size: 20px; width: 200px; font-family: 'Times New Roman';" type="button" id="dropdownMenuButton1" aria-haspopup="true" data-bs-toggle="dropdown" aria-expanded="false">
       Locaton List
   </button>
   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
       <!-- 替换成自定义容器，去掉dropdown-item类 -->
       <div class="dropdown-list-container">
           @foreach (var item in ViewBag.DDLLocations)
           {
               <input type="checkbox" id="@item.Value" name="selectedLocations" value="@item.Value" />
               <label for="@item.Value">@item.Text</label>
               <br />
           }
       </div>
   </div>
</div>

方法2：强制覆盖.dropdown-item的高亮样式 #

如果你必须保留.dropdown-item类，可以添加CSS禁用它的交互背景：

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active {
    background-color: transparent; /* 透明背景，移除蓝色高亮 */
    color: inherit; /* 保持文字颜色不变 */
}

推荐用方法1，因为.dropdown-item原本是给单个下拉选项设计的，用来包裹整个复选列表不符合语义，容易引发样式冲突。

内容的提问来源于stack exchange，提问作者Acadia