Remove the outline from Bootstrap 5 accordion buttons

user_2226653 0
Viewed 7011

When you check out the Bootstrap 5 accordion you'll see an outline. I want to remove it. I am not sure which element actually produces the outline, but I suspect it is the button. In any case I have tried to apply the following to all possible elements:

.accordion-item, .accordion-item:focus, .accordion-item:active,
.accordion-header, .accordion-header:focus, .accordion-header:active,
.accordion-button, .accordion-button:focus, .accordion-button:active {
  outline: none !important;
}

Nothing seems to work. Any ideas?

Here is a copy of the html code:

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        ...
      </div>
    </div>
  </div>
</div>
bootstrap-5 twitter-bootstrap css
2 Answers

To remove the shadow and blue border color...

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
}

Demo

user_1714560

You can use

.accordion-button:not(.collapsed){
        box-shadow: none;
    }
user_145694870
Related