Changing the color arrow in Bootstrap

Issue

I am beginner web developer. I have in my website accordion: https://getbootstrap.com/docs/5.0/components/accordion/

and this code:

<div class="accordion pb-3" 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" style="background-color: red;border:0">
                                name and surname
                            </button>
                        </h2>
                        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample" style="background-color: red;">
                            <div class="accordion-body">
                                This is aółóźńthe first item's accordion body.It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                            </div>
                        </div>
                    </div>
                </div>

It’s work fine. I would like to change the accordion arrow color to green. How can this be done?

Please help me

Solution

Bootstrap uses background images in their accordion arrows. You could edit the fill property of the linked svg.

I checked up on the svg used on https://getbootstrap.com/docs/5.0/components/accordion/, and changed the color to white with css

.accordion-button:after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path 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'/></svg>") !important;
}

Note here that I wrote fill="%23ffffff", this changes the color to #ffffff (%23 is parsed to #)

You can find my codepen here

I would like to add that I don’t think this is the most elegant way of solving this. You might want to change the content of the :after element of the .accordion-button.

Take a look at Adding arrows to the right using Bootstrap Accordion

Answered By – Harm Manders

Answer Checked By – Gilberto Lyons (AngularFixing Admin)

Leave a Reply

Your email address will not be published.