Bootstrap下拉菜单在切换时更改背景颜色

huangapple go评论58阅读模式
英文:

Bootstrap dropdown on toggle change background color

问题

我已经有这段代码:

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle buttonForProfile" type="button" id="dropdownMenuButton" data-bs-toggle='dropdown' aria-haspopup="true" aria-expanded="false">
        <?php echo $_SESSION['username']; ?>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Profile</a>
        <a class="dropdown-item" href="#">Subscriptions</a>
        <a class="dropdown-item" href="./php/signout.php">Sign out</a>
    </div>
</div>

我添加了一些 CSS,现在它看起来像这样:

Bootstrap下拉菜单在切换时更改背景颜色

当我点击它时,背景颜色会恢复为默认值:

Bootstrap下拉菜单在切换时更改背景颜色

如何在下拉菜单切换时更改那个灰色背景?

英文:

I have this code:

      &lt;div class=&quot;dropdown&quot;&gt;
        &lt;button class=&quot;btn btn-secondary dropdown-toggle buttonForProfile&quot; type=&quot;button&quot; id=&quot;dropdownMenuButton&quot; data-bs-toggle=&#39;dropdown&#39; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
          &lt;?php echo $_SESSION[&#39;username&#39;]; ?&gt;
        &lt;/button&gt;
        &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;dropdownMenuButton&quot;&gt;
          &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Profile&lt;/a&gt;
          &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Subscriptions&lt;/a&gt;
          &lt;a class=&quot;dropdown-item&quot; href=&quot;./php/signout.php&quot;&gt;Sign out&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

I added some css and now it looks like this:

Bootstrap下拉菜单在切换时更改背景颜色

When I click on it, the background changes back to default:

Bootstrap下拉菜单在切换时更改背景颜色

How do I change that gray background when the dropdown is toggled?

答案1

得分: 1

     #dropdownMenuButton:focus {
       background-color: //颜色;
     }

PS: btn-secondary 给它灰色如果你自定义颜色就不需要它
英文:
 #dropdownMenuButton:focus {
   background-color: //color;
 }

PS: btn-secondary gives it the grey color, you don't need it if you're customizing the color.

huangapple
  • 本文由 发表于 2023年2月14日 22:35:19
  • 转载请务必保留本文链接:https://go.coder-hub.com/75449346.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定