活动时的 Bootstrap According CSS 样式

Question

我试图让我的手风琴按钮在显示时保持紫色背景颜色，在关闭时返回白色，并且在单击后删除蓝色突出显示边框。我正在使用 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) 上的边框，以及手风琴打开且用户单击离开时的最终状态的边框，以便背景保持紫色，直到手风琴关闭然后返回到白色的。

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)

}

这是改为向上/向下箭头svg