Bootstrap 手风琴 CSS 激活时的样式

Question

我试图让我的手风琴按钮在显示时保持紫色背景色，在关闭时 return 保持白色，并且在单击后删除蓝色突出显示边框。我正在使用 boostrap v5。这是我试过的CSS，实现了下图中的结果：

    .accordion-button:link, .accordion-button:visited, .accordion-button:hover, .accordion-button:focus ,.accordion-button:active  {
  background-color: #5500C9 !important;
    color:#FFF !important;
    text-decoration: none !important;
     border: hidden !important;
          }

<div class="accordion-item ">
            <h2 class="accordion-header" id="headingOne">
              <button class="accordion-button collapsed mb-3 border-bottom" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> How to sell my motorbike? </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse border mb-3 bg-dark text-white" aria-labelledby="headingOne" data-bs-parent="#motorbikeAccordion">
              <div class="accordion-body"> <strong>How do I sell my motorbike to you?</strong> Selling your motorbike to us is easy. We operate three simple steps. Enter your motorbike's registration in the box above and confirm we've found the right bike. After that we will ask for some details about your motorbike such as the mileage, condition and accessories. Once we've received your contact details we will be in touch within just 24 hours. </div>
            </div>
          </div>

1：折叠状态：

2：悬停状态：

3：显示状态：

4：移除焦点时的最终状态（点击离开）

bootstrap 官方文档对手风琴的信息极其有限。

问题：我想删除显示状态 (3) 的边框，以及手风琴打开且用户点击离开时的最终状态的边框，使背景保持紫色，直到手风琴关闭，然后 return 变为白色。

Answer 1

在 bootstrap CSS 中挖掘后，我发现类使用了：

.accordion-button:not(.collapsed) {
  color: #FFF  !important;
  background-color: #5500C9 !important;
}



.accordion-button:link, .accordion-button:visited, .accordion-button:hover, .accordion-button:active  {
  background-color: #5500C9 !important;
    color:#FFF !important;
    text-decoration: none !important;
     border: hidden !important;
       border-color: #FFF !important;
    box-shadow: 0px !important;

      
}

.accordion-button:focus {
  z-index: 3;
  border-color: #FFF !important;
  outline: 0;
  box-shadow: 0 0 0 .25rem #FFF !important;
}

奖励内容：

    .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='%230c63e4'%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");
  transform: rotate(180deg)

}

这个是改成up/down箭头svg

Bootstrap 手风琴 CSS 激活时的样式

Bootstrap Accordion CSS styling when active

css

accordion

twitter-bootstrap