Bootstrap 手风琴箭头颜色

Question

如何更改 collapsed 手风琴箭头的颜色？我尝试了更多解决方案，但我设法只更改了按钮的文本颜色。

固定颜色是蓝色，与深色背景完全不兼容。

示例：https://getbootstrap.com/docs/5.0/components/accordion/

谢谢！

Answer 1

箭头的活动颜色由 SCSS 变量 $accordion-icon-active-color 决定，可以在他们的 source code.

中看到

您可以通过在全局 scss 文件中执行以下操作来覆盖它：

$accordion-icon-active-color: #ffffff; // your new color code
@import "bootstrap/variables";

Answer 2

您可以覆盖 .accordion-button:not(.collapsed)::after

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

作者：

.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='%23YOUR_HEX_CODE'%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");
        }

将“YOUR_HEX_CODE”替换为您之前指令中不带#的十六进制代码

Bootstrap 手风琴箭头颜色

Bootstrap accordion arrow color

bootstrap-5