我是初學者網站開發人員。我在我的網站上有手風琴:https://getbootstrap.com/docs/5.0/components/accordion/

這個代碼:

<div class="accordion pb-3" id="accordionExample">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingOne">
                            <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">
                                name and surname
                            </button>
                        </h2>
                        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample" style="background-color: red;">
                            <div class="accordion-body">
                                This is aó?ó?ńthe 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.
                            </div>
                        </div>
                    </div>
                </div>

一切正常。我想把手風琴箭頭的顏色改成綠色。如何做到這一點？

請幫助我

Bootstrap在其折疊箭頭中使用背景圖像。您可以編輯鏈接的svg的fill屬性。

我檢查了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 = & quot% 23ffffff & quot，這會將顏色更改為#ffffff (%23被解析為#)

你可以在這里找到我的筆

我想補充一點，我不認為這是解決這個問題最優雅的方式。您可能希望更改。手風琴按鈕。

看看如何使用自舉手風琴向右添加箭頭

您可以在自己的CSS文件中覆蓋選擇器。手風琴按鈕:不是(。折疊)::之后

使用:

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為一個項目做的，為了保持箭頭的黑色，我改變了背景色。

這是對我有效的解決方案，也請注意css after規則前面的兩個冒號

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

我也有同樣的問題，這個對我很有效。

background-image: url(arrow_right.svg)!important;

但是你也需要在css的轉換部分上工作，就像我下面的例子一樣。

.accordion-button:not(.collapsed)::after {transform: rotate(-90deg)!important;}

這為我工作，通過使用過濾器屬性，并找到我想要的反轉百分比。

.accordion-button:not(.collapsed)::after {
    filter: invert(50%);
}

感謝貢獻一個堆棧溢出的答案！

請務必回答問題。提供詳細信息并分享您的研究！但是要避免…

尋求幫助、澄清或回應其他答案。根據意見發表聲明；用參考資料或個人經歷來支持他們。要了解更多，請查看我們關于撰寫精彩答案的提示。