Bootstrap下拉登录按钮移开光标后背景变白问题求助

你遇到的这个问题是Bootstrap默认样式导致的——点击下拉按钮后，按钮会触发focus状态，Bootstrap自带的focus样式会给按钮加上白色背景（或边框/阴影），就出现了你看到的白色方块。下面给你具体的解决方法，顺便提几个代码里的小问题：

一、修复白色方块的CSS方案 #

你只需要添加一段自定义CSS，覆盖Bootstrap默认的dropdown-toggle元素的focus状态样式，让按钮始终继承背景图的颜色：

/* 覆盖下拉按钮的focus状态样式 */
.dropdown-toggle:focus {
  background-color: inherit !important; /* 强制继承父元素的背景色 */
  box-shadow: none !important; /* 去掉Bootstrap默认的focus高亮阴影 */
  border-color: transparent !important; /* 移除默认的边框颜色（如果有的话） */
}

如果想更精准地只作用于这个Login按钮，建议给它加个专属类名，避免影响其他下拉按钮：

修改后的HTML： #

<li class="dropdown"> 
  <a href="#" class="dropdown-toggle login-btn" data-toggle="dropdown"><b>Login</b><span class="caret"></span></a> 
  <ul id="login-dp" class="dropdown-menu">
    <!-- 这里放下拉菜单的内容 -->
  </ul>
</li>

对应的CSS： #

.login-btn:focus {
  background-color: inherit;
  box-shadow: none;
  border-color: transparent;
}

二、代码里的其他小问题 #

• HTML结构不完整：你提供的代码里，<ul id="login-dp" class="dropdown-menu">没有闭合标签，也缺少外层<li>的闭合</li>，记得补充完整，否则可能导致页面布局错乱或者样式异常。
• Bootstrap版本兼容性：如果你用的是Bootstrap 5，data-toggle="dropdown"需要改成data-bs-toggle="dropdown"，不然下拉菜单的交互功能可能无法正常触发；如果是Bootstrap 3/4，当前的data-toggle是没问题的。
• 依赖文件检查：确保你正确引入了Bootstrap的CSS和JS文件，顺序要正确（先引入CSS，再引入jQuery（Bootstrap 3/4需要），最后引入Bootstrap的JS），否则下拉功能和样式都可能出问题。

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