Изменить цвет значка свернутой кнопки аккордеона в Bootstrap 5

Question

Я пытаюсь изменить цвет «кнопки аккордеона» в Bootstrap 5, когда он свернут.

Я пробовал ниже. Он изменяет фон, но не цвет значка кнопки.

      .accordion-button.collapsed {
    color: white;
    background: blue;
}

Что мне делать, чтобы изменить значок аккордеона вниз (свернутый) для Bootstrap 5?

Answer 1

Потому что это background-image(используя значки начальной загрузки ), который установлен в ::after псевдоэлемент, поэтому измените изображение

Обновление - (на основе комментария OP)

Он заменяет значок изображением. Как изменить цвет существующего изображения (значка)?

Так что используйте то же фоновое изображение и измените заливку на #fff

Обратите внимание, что URL-адрес SVG закодирован с помощью boostrap

Answer 2

Мне нужно было сделать что-то подобное. Я переопределил значения по умолчанию .accordion. Мне не нужна была новая иконка, просто новый цвет. (Я сделал fill=white как для свернутого, так и для нет). Но вы можете видеть, что это также может легко изменить значок.

      <style>
        .accordion {
            --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%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");
            --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%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");
        }
</style>

Answer 3

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

используйте это, и он отлично работает, настраивая css для этого

Answer 4

Если вы компилируете свой собственный css через sass, вы можете установить переменную $accordion-icon-active-color, которая будет устанавливать значение заполнения SVG.

Answer 5

Это сработало для меня

      .accordion-button:focus {
   z-index: 3;
   border-color: #279C88;
   outline: 0!important;
   /* I changed the color on this line */
   /* If you do not want any color, just delete */
   box-shadow: 0 0 0 0.25rem rgba(39, 156, 136, 0.25);
}