Change color of Bootstrap 5 accordion button open icon (up chevron)

user_753080 0
Viewed 3224

Following this excellent answer, I was able to change the fill color of Bootstrap 5's down-chevron svg (rendered as a background-image. I am now trying to find the url for the up-chevron (open icon) so I can change its fill-color. But I cannot find it.

Inspecting the html of both the Bootstrap example and my own code, I see only the "down" collapsed background image and the substituted "up" image in a grayed-out square to its right. Nothing I've tried in CSS successfully targets that substituted image.

Here is the code that works for the down-icon, followed by my efforts to target that up-icon. (I use background-color:yellow to see if the selector is working.)

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

.accordion-button.collapse a:link.active,
.accordion-button-active-collapse ::after,
button.accordion-button-active::after.active {
    background-color: yellow;
}
bootstrap-5 css
1 Answers

The correct css is this:

.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='%230c63e4'%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");
    transform: rotate(-180deg)
}

To change the icon color, just change the svg's fill (following "%23"). I had a look in the source file and found it there.

Hope it helps a few folks.

user_7530800
Related