Bootstrap 手风琴箭头颜色

Question

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

恒定的颜色是蓝色，与深色背景根本不兼容。

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

谢谢！

Answer 1

您可以覆盖 .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”替换为您的十六进制代码，在上一条指令中不带#