更改 Bootstrap 中的顏色箭頭

Question

我是初學者 Web 開發人員。 我的網站上有手風琴： 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>

它工作正常。 我想將手風琴箭頭顏色更改為綠色。 如何才能做到這一點？

請幫我

Answer 1

Bootstrap 在其手風琴箭頭中使用背景圖像。 您可以編輯鏈接的 svg 的填充屬性。

我檢查了https://getbootstrap.com/docs/5.0/components/accordion/上使用的 svg ，並用 ZC7A628CBA22E28EB17B5F5C6AE2A26 將顏色更改為白色

.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 被解析為 #）

你可以在這里找到我的 codepen

我想補充一點，我認為這不是解決這個問題的最優雅的方法。 您可能想要更改.accordion-button的:after元素的內容。

看看使用 Bootstrap Accordion 向右添加箭頭

Answer 2

您可以在自己的 CSS 文件中覆蓋選擇器 - .accordion .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 的項目所做的，以便在我更改背景顏色時保持箭頭顏色為黑色。

Answer 3

您無法更改手風琴中的箭頭顏色，因為引導程序使用的是 SVG。 你想改變顏色然后你可以改變 SVG 代碼之后

Answer 4

這是對我有用的解決方案，也不是規則后 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;
 }

Answer 5

我確實有同樣的問題，這對我有用。

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

但是您還需要處理 css 的轉換部分，就像在我的情況下一樣，下面的工作也是如此。

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

Answer 6

  This Worked for me try this solution

 .accordion-button:not(.collapsed)::after {
  background-color: #d2153d;
  background-image: url("/img/Home/FAQ/arrow-up.png");
  transform: rotate(360deg);
  }

  .accordion-button.collapsed::after {
  background-image: url("/img/Home/FAQ/arrow-down.png");
  }

  .accordion-button:not(.collapsed) {
  color: #ffffff;
  background-color: #d2153d;
  }

Answer 7

這對我有用，通過使用過濾器屬性並找到我想要的反轉百分比。

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