更改Bootstrap 5中折叠的手风琴按钮图标颜色

Change accordion button collapsed icon color in Bootstrap 5(更改Bootstrap 5中折叠的手风琴按钮图标颜色)
本文介绍了更改Bootstrap 5中折叠的手风琴按钮图标颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试在Bootstrap 5折叠时更改它的accordion's "accordion-button"颜色。

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

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

如何更改Bootstrap 5的手风琴向下(折叠)图标?

推荐答案

因为它是在::after伪元素中设置的background-image(使用bootstrap icons),所以更改图像

更新-(基于OP评论)

它用图像替换图标。如何更改现有图像(图标)的颜色?

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

请注意,SVG URL由引导程序编码

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
.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 class="accordion" 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">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <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 class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <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 class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <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>

这篇关于更改Bootstrap 5中折叠的手风琴按钮图标颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

layui表格:设置表头居中,内容居左的实例代码:表头在属性中控制,内容直接用css样式控制 { field: 'Result', title: '结果', align: 'center', width: '60%', templet: function (d) { return 'div style="text-align:left"' + d.Result + '/div' }},
p您的性别:/p div class="radio-sex" input type="radio" id="sex1" name="sex" label for="sex1"/label span男/span /div div class="radio-sex" input type="radio" id="sex2" name="sex" label for="sex2"/label 女 /divstyle.radio-sex { position: relative; display: inline-
h2Cars Select/h2div class="select"select name="cars"option value="volvo"Volvo/optionoption value="saab"Saab/optionoption value="opel" selectedOpel/optionoption value="audi"Audi/option/select/divstylebody {font-size: 20px;color: #090;background-color: #eee
Show a div on desktop and show another div on mobile with CSS(使用css在桌面上显示一个div,在移动设备上显示另一个div)
How can I set decimal width for a column in R Shiny?(如何设置R闪亮中的列的小数宽度?)
Does anybody tell me what changes need to be done here if I want a triangle at the top not bottom?(有没有人告诉我,如果我想要一个顶部的三角形而不是底部的三角形,这里需要做哪些修改?)