在Bootstrap5中更改手风琴按钮折叠图标颜色

html5 • • 问答

我试图在折叠时更改 Bootstrap 5 的手风琴的“手风琴按钮”颜色。

我在下面试过。它会更改背景，但不会更改按钮的图标颜色。

.accordion-button.collapsed {
    color: white;
    background: blue;
}

我应该怎么做才能更改 Bootstrap 5 手风琴的向下（折叠）图标？

回答

因为是在伪元素中设置的一个background-image（使用bootstrap图标）::after，所以更改图像

更新 - （基于 OP 评论）

它用图像替换图标。如何更改现有图像（图标）的颜色？

所以使用相同的背景图像并将填充更改为 #fff

请注意，SVG URL 是由 boostrap 编码的

.accordion-button.collapsed {
  background: blue
}

.accordion-button.collapsed::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%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");
}
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<div>
  <div>
    <h2>
      <button type="button" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div aria-labelledby="headingOne">
      <div>
        <strong>This is the first item's accordion body.</strong> 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>
    <h2>
      <button type="button" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div aria-labelledby="headingTwo">
      <div>
        <strong>This is the second item's accordion body.</strong> 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>
    <h2>
      <button type="button" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div aria-labelledby="headingThree">
      <div>
        <strong>This is the third item's accordion body.</strong> 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>

以上是在Bootstrap5中更改手风琴按钮折叠图标颜色的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>