CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-5
JohnSmith1976
JohnSmith1976

Reputation: 666

Remove the outline from Bootstrap 5 accordion buttons

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>

Upvotes: 12

Views: 22896

Answers (6)

Uchephilz
Uchephilz

Reputation: 548

I added this within a style tag:

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

  .accordion-button:not(.collapsed) {
    color: var(--bs-accordion-active-color);
     background-color: #ffffff; /* change this to the color you want */
    box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
  }

Upvotes: 0

Avinash Raut
Avinash Raut

Reputation: 2103

Use this code to get the color change to white on both collapse and non collapse icon and also change the default border color:

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
}
.accordion-button:not(.collapsed)::after{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button.collapsed::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

Upvotes: 0

Laloprince
Laloprince

Reputation: 69

Here is how I removed it. The class 'item' is my class i.e. it is my custom class.

.accordion .item .accordion-header button{
    background-color: transparent;
    box-shadow: none;
}

.accordion .item{
    border: 0;
}
<Accordion className="p-0"  alwaysOpen>
            <Accordion.Item eventKey="0" className="item">
              <Accordion.Header>Recent</Accordion.Header>
              <Accordion.Body className="d-flex flex-column">
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
              </Accordion.Body>
            </Accordion.Item>
            <Accordion.Item eventKey="1" className="item">
              <Accordion.Header>Groups</Accordion.Header>
              <Accordion.Body className="d-flex flex-column">
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
              </Accordion.Body>
            </Accordion.Item>
          </Accordion>

Upvotes: 0

misterEugene
misterEugene

Reputation: 1

Here it will work:

.accordion-item {
  border: none;
}

Upvotes: 0

danialcodes
danialcodes

Reputation: 183

You can use

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

Upvotes: 6

Carol Skelly
Carol Skelly

Reputation: 362360

To remove the shadow and blue border color...

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

Demo

Upvotes: 43

Related Questions