'Changing the color arrow in Bootstrap

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

csstwitter-bootstrap


Solution 1:[1]

You could override the selector in your own CSS file - .accordion-button:not(.collapsed)::after

with:

background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%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");

This is how I did it for a project using Bootstrap v5 in order to keep the arrow colour black as I have changed the background colour.

Solution 2:[2]

This is the solution that worked for me and also note the two colons before the css after rule

.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;
 }

Solution 3:[3]

I did have the same issue and this worked for me.

background-image: url(arrow_right.svg)!important;

but you will also need to work on the transformation part of the css also like in my case the below worked.

.accordion-button:not(.collapsed)::after {transform: rotate(-90deg)!important;}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dharman
Solution 2
Solution 3 Nazehs

Related Questions