更改 Bootstrap 中的颜色箭头

Question

我是初学者网络开发人员。我的网站中有手风琴： https://getbootstrap.com/docs/5.0/components/accordion/

\n

和这段代码：

\n

<div class="accordion pb-3" id="accordionExample">\n                    <div class="accordion-item">\n                        <h2 class="accordion-header" id="headingOne">\n                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" style="background-color: red;border:0">\n                                name and surname\n                            </button>\n                        </h2>\n                        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample" style="background-color: red;">\n                            <div class="accordion-body">\n                                This is a\xc3\xb3\xc5\x82\xc3\xb3\xc5\xba\xc5\x84the first item\'s accordion body.It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.\n                            </div>\n                        </div>\n                    </div>\n                </div>\n

\n

工作得很好。我想将手风琴箭头颜色更改为绿色。如何才能做到这一点？

\n

请帮我

\n

Answer 1

Bootstrap 在其手风琴箭头中使用背景图像。您可以编辑链接的 svg 的填充属性。

我检查了https://getbootstrap.com/docs/5.0/components/accordion/上使用的 svg ，并使用 css 将颜色更改为白色

.accordion-button:after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path 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'/></svg>") !important;
}

请注意，我在这里写了fill="%23ffffff"，这会将颜色更改为#ffffff（%23 被解析为#）

你可以在这里找到我的代码笔

我想补充一点，我认为这不是解决这个问题的最优雅的方法。:after您可能想要更改.accordion-button.

看一下使用 Bootstrap Accordion 向右侧添加箭头

Answer 2

您可以在自己的 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='%23212529'%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");

这就是我在使用 Bootstrap v5 的项目中所做的，以便在更改背景颜色时保持箭头颜色为黑色。