What is the best way to eliminate the blue color from a Boostrap 5.3 accordion item when it is opened?

As shown in these two images, I am looking to remove the blue color and blue border when opened: https://i.sstatic.net/vOIna.png https://i.sstatic.net/7eLfK.png

                              <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-heading<?php echo $id; ?>">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse<?php echo $id; ?>" aria-expanded="false" aria-controls="flush-collapse<?php echo $id; ?>">
                                    <?php echo $row["question"]; ?>
                                </button>
                                </h2>
                                <div id="flush-collapse<?php echo $id; ?>" class="accordion-collapse collapse" aria-labelledby="flush-heading<?php echo $id; ?>" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body"><?php echo $row["reponse"]; ?></div>
                                    </div>
                                </div>

Many thanks for your assistance, Stef

I have experimented with different CSS strategies but so far none have been successful

Answer №1

By adjusting the CSS rules for the .accordion-button:not(.collapsed) class, you have the ability to change the styling of the button when the accordion item is expanded in Bootstrap.

.accordion-button:not(.collapsed) {
      background-color: transparent !important;
      color: inherit;
    }

button.accordion-button:focus{
      box-shadow: inherit;
}

Answer №2

Experiment with this CSS code

button.accordion-button:focus{
      box-shadow: none;
      outline: none; 
}

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

HTML/CSS - Enhances user experience by zooming in on select tag when tapped on mobile devices

I am experiencing an issue with a select menu on mobile devices. Whenever I tap on the menu, it seems to zoom in slightly. Is there a particular -webkit property causing this behavior? How can I prevent the screen from zooming when I tap on the select me ...

When generating a docx file with html-docx-js, it lacks the capability to incorporate external CSS class styles into the document

I have been utilizing the html-docx-js module to convert html content into docx format. However, I am facing an issue where most of my CSS is externally loaded and html-docx-js does not apply any styles. Here is a simplified code sample: const html = &ap ...

Opacity error with jQuery slider specifically affecting Google Chrome browser

My Magento site features a custom-built slider that is both responsive and has unique touch behavior. The desired behavior for the slider is as follows: A three-image slider where the middle image has an opacity of 1.0, while the other two images have an ...

Unable to load nested iframe

When working with an HTML document, I tried to add an iframe in the body without any cross-origin restrictions (same URL). However, when I tried to do the same thing within the appended iframe, although the nested iframe element was successfully added to ...

Guide on setting a session variable upon clicking an <a> hyperlink

Having this issue where I need to set a session variable when clicking on a regular link like: <a href="home" name="home">home</a> From my research, it seems PHP cannot capture the click event in order to set a session variable. I've he ...

The mixin animation received 2 arguments, even though it only accepts 1

Below is the sass code snippet, @include animation(swayb $speed ease infinite 3s, reset 1s ease forwards 5s); When I try watching using compass watch on my Ubuntu machine, it triggers an error, (Line 2500 of _includes/_common.scss: Mixin animation tak ...

How can I showcase both a username and email address in a Material UI chip?

I'm currently using Material UI chip to show name and email next to each other. However, when the name is long, the email goes beyond the chip boundary. Here's my function that generates the chips: getGuestList() { let {guests} = this.sta ...

Tips on choosing vml elements using jquery or vanilla javascript

I am trying to select a VML element using jQuery without relying on 'id' or 'class', but my attempts have been unsuccessful so far. <v:oval id="vmlElement" style='width:100pt;height:75pt' fillcolor="red"> </v:oval> ...

Grid numbering with CSS in jQuery mobile design

Looking to create a numbered grid where the user inputs a number and the grid is generated. I am considering using CSS, HTML, or Jquery Mobile for an iPad project. I'm unsure of the best approach at the moment. I would like the grid and numbers to aut ...

Double f span causing unusual behavior in Chrome browser

Why does the highlight focus on "ort" instead of "fort"? It appears this occurs when there are two f's. When I substitute f with other letters, like d, it shows correctly. Could this be a bug in Chrome? Chrome version is chrome83. add: It seems to be ...

Issue in Chrome where hover state does not persist after clicking, occurring sporadically

It's surprising that I couldn't find any information about this on Google. This bug is really annoying, and I'm not sure if it can be fixed without an update from Google for their browser. Description of the issue: When clicking on an eleme ...

The success callback method is no longer correctly referencing the variable due to a change in the AJAX request

Imagine you have a table in your HTML file with the following rows, where {{ }} represent variables: <tr id="{{ object.id }}"> <td class="name">{{ object.name }}</td> </tr> <tr id="{{ object.id }}"> <td class="nam ...

Design HTML dropdown menu

I have a sleek menu design with rounded buttons, and I am looking to extend the same style to the dropdown list. I have experimented with various approaches but there are two specific issues that I need assistance with: 1. Achieving rounded corners simil ...

I am experiencing an issue with the initial for-loop in my code as it is not

Upon clicking the start button, the score button, as well as the try again or correct button, are not being updated. Can someone help me figure out what's wrong? I believe the issue lies within this section of the code: for (i=0; i<5; i++) { do ...

Calculating JS functions before images are loaded

Following up on a previous question, I am utilizing JavaScript code from another article to position a "content" div relative to a fixed div in my project. However, the issue arises when the positioning of the "content" div is calculated only after all the ...

The SVG image does not display in browsers other than Internet Explorer (IE)

I am encountering an issue with adding a menu toggle image in SVG format to my HTML. Unfortunately, the image is not displaying as expected. Here are screenshots for comparison between Explorer and Chrome: https://i.stack.imgur.com/74sqh.png https://i. ...

Side by side CSS list item with before element

Currently, I am working on displaying a list of 3 items where the list item number is larger than the actual text. I have been successful in achieving this part, but now my goal is to place them side by side. This is the code snippet I have implemented: ...

Angular Placeholder Positioned at the Top

Hello, I am a beginner in Angular and need to create an input field that looks like this: https://i.sstatic.net/LUXfJ.png Everything is going fine except for the Vorname placeholder at the top. How can I place it there? Currently, I am utilizing Angular ...

Troubleshooting a navigation issue in Angular involving the mat-sidenav element of material UI while transitioning between components

I would greatly appreciate your assistance in resolving the issue I am facing. I have been trying to navigate from one view to another, but when I use an <a> tag nested within a <mat-sidenav>, I encounter the following error: "Uncaught (in prom ...

How can you ensure a line stays fixed to the bottom of a box regardless of the text size in SCSS and HTML?

I have a CSS rule that displays a line within a div only when the div is active. The specific SCSS class I am using is: .active-tab:after { content: ''; display: inline-block; height: 4px; width: 100px; right: -7px; background-color: ...