Change the background color of a Bootstrap dropdown when toggled

I recently created this code snippet:

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

After some styling with CSS, it now appears as shown in this image:

https://i.sstatic.net/3dzkl.png

However, upon clicking on the dropdown, the background reverts to its default state:

https://i.sstatic.net/vLN2s.png

Is there a way to customize the gray background that appears when toggling the dropdown?

htmljquerycssbootstrap-5

Answer №1

 #dropdownMenuButton:focus {
   background-color: //customized color;
 }

Note: btn-secondary provides the grey color by default, it can be omitted if you are adjusting the color.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The addition operation in JavaScript seems to be malfunctioning as it is not adding up my values

After encountering an issue with calculating the number of payments, I discovered that the addition operator was not functioning as expected. Instead of summing up values, it was treating them as strings. For instance, when trying to add 3 and 5, the out ...

javascripthtml

Is there a way to alter the text color using JavaScript on the client side?

Is there a way to change the color of a list item in a ul based on whether it is a palindrome or not? Here is the JavaScript file I am working with: function isPalindrome(text){ return text == text.split('').reverse().join(''); } c ...

javascripthtmlformsstylesevent-listener

Develop an ASCX component to handle various tasks

I am currently in the process of developing a unique custom control that will feature two radio buttons. This project is being carried out using MVC4 and ASP.NET technology. At the moment, I have successfully created two sets of two radio buttons on separa ...

javascriptjqueryhtmlasp.netasp.net-mvc-4

What causes errors in jQuery ajax jsonp requests?

"fnServerData": function( sUrl, aoData, fnCallback, oSettings ) { oSettings.jqXHR = $.ajax( { "url": sUrl, "data": aoData, "success": fnCallback, "error":function(msg){ ...

jqueryajaxdjangodatatables

What steps can I take to properly position my child element within its parent container?

Is there a way to adjust the width of a child element so it fits snugly inside its parent div? The width should be contained within the padding area. The top and left placement is correct, but the right side needs adjustment. Check out this link for refe ...

htmlcss

What are some techniques for styling a field when the div id is not specified?

I need to customize a data field within a table, but I am unable to locate or identify its div ID. Here is the page source: <tbody> <tr> <td style="font-size:12px; text-align:center;" name=""> <div sty ...

javascripthtmlcss

Mobile device causing issues with sticky footer functionality

Can anyone help me troubleshoot an issue with my sticky/floating bottom footer on a calorie calculator? It works fine on desktop but not on mobile. Any ideas what might be causing the problem? HTML: <footer class="footer"> <div class="summar ...

htmlcssmobilelayout

Leveraging a Static HTML landing page template within an Angular 6 application

I currently have an Angular 6 app hosted on example.com, with the dist folder being served on port 5000. Additionally, I have a separate landing page folder with its HTML, CSS, and JS files being served on port 6000 at example.com/welcome. Is there a way ...

htmlnode.jsangularexpressnginx

Ways to handle errors when using navigator.clipboard.writeText

document.queryCommandSupported('copy') may not be available on all browsers. I experimented with the code below, which successfully copies the link on Firefox but fails on Opera. It displays an alert indicating that the code has been copied, yet ...

javascripthtml

Adapting a CSS design

Having some trouble with creating a CSS style. Here's what I have so far: http://jsfiddle.net/WhNRK/26/ Originally designed for a label, but now attempting to modify it for something like this: <input type='radio' name='mcq' ...

htmlcss

Execute JavaScript/AJAX solely upon the selection of a button

Currently, my script is being executed immediately after the page loads and then again after a button click. Is there any way to modify it so that the script waits until I click the button before running? As far as I understand, this code runs asynchronous ...

javascriptjqueryhtmlajax

No code is appearing on the page, just a blank space

Whenever I visit this page on the web, the screen shows up as empty and I've encountered similar issues with other JavaScript pages that I've created. This makes me wonder if there might be a missing piece of code or something else causing the pr ...

javascripthtmlbuttoncharts

Tips for choosing the nearest table rows with CSS

When it comes to CSS, specifying a style for the immediate child rows of a table can be done like this: table > tr { background: blue; } The challenge arises when we have a <tbody> tag surrounding the <tr> tags. Is there a way to addre ...

htmlcss

Despite encountering Error 404 with AJAX XHR, the request is successfully reaching the Spring Controller

I am attempting to upload a file with a progress bar feature. var fileInput = document.getElementById('jquery-ajax-single') var form = new FormData(); form.append('uploadFile',fileInput.files[0]); $.ajax({ url: "fi ...

javascriptjqueryajaxspringdropzone.js

Can you tell me the name of the scrolling effect used for the background on this website?

Hello everyone, I have a question to ask. Be gentle with me as this is my first time posting here. I've been learning CSS3 and recently came across an effect that caught my eye. I'm not sure if it falls under the category of parallax scrolling or ...

css

How to Retrieve Value from Table Using jQuery

As a beginner in the world of jQuery, I have come across a seemingly simple question that has left me puzzled. The task at hand involves manipulating the following table: <table class="mytable"> <th>name</th> <th>second</th> ...

jqueryhtml-tablehtml-select

Using HTML, CSS, and jQuery to create a master-detail feature

I'm looking to implement a master-detail layout, so I decided to follow this tutorial for guidance: While trying to replicate the tutorial, I encountered an issue with my code. Here's the code snippet that I am working on: HTML/jQuery <!DO ...

javascriptjqueryhtmlcss

Is it feasible to utilize VAST for delivering HLS streams? Can m3u8 files be incorporated into VAST tags for delivery?

We are integrating a video player that supports VAST pre-roll, mid-roll, and post-roll video ads. I'm wondering if it's feasible to include m3u8 files in VAST tags? I've reviewed the vast specification and examples, but haven't come ac ...

javascripthtmladsvast

What is the best way to run an external JavaScript file at regular intervals?

I enjoy loading an external JavaScript file every 10 seconds, or whenever the page body is clicked (in which case, the script should only run if a few seconds have passed). If you could provide me with some documentation on this topic, that would be grea ...

javascriptphpjquerywordpress

Utilizing JQuery to differentiate a single element within a group of elements

As a beginner in the world of jquery, I am attempting to assign a font awesome icon star (fa-star) to differentiate between admins and regular members within the group members bar. The usernames have been blurred out for privacy reasons, but my goal is to ...

javascriptjqueryhtmlcss