Изменить цвет значка открытия кнопки аккордеона в Bootstrap 5 (шеврон вверх)

Question

После этого отличного ответа я смог изменить цвет заливки нижнего шеврона svg Bootstrap 5 (отображаемого как фоновое изображение. Теперь я пытаюсь найти URL-адрес для верхнего шеврона (значок открытия), чтобы я мог изменить его цвет заливки. Но я не могу его найти.

Изучая HTML- код как примера Bootstrap, так и моего собственного кода, я вижу только свернутое фоновое изображение «вниз» и замененное изображение «вверх» в затененном квадрате справа от него. Ничто из того, что я пробовал в CSS, не нацелено на это замещенное изображение.

Вот код, который работает для значка вниз, а затем мои усилия по нацеливанию на этот значок вверх. (Я использую background-color:yellow, чтобы проверить, работает ли селектор.)

.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 {цвет фона: желтый; }

Буду очень признателен за помощь!

Answer 1

Правильный css таков:

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

Чтобы изменить цвет значка, просто измените заливку svg (после "% 23"). Я просмотрел исходный файл и нашел его там.

Надеюсь, это поможет некоторым людям.