當你檢查Bootstrap 5手風琴時，你會看到一個輪廓。我想去掉它。我不確定哪個元素實際上產生了輪廓，但我懷疑是按鈕。在任何情況下，我都試圖將以下內容應用于所有可能的元素:

.accordion-item, .accordion-item:focus, .accordion-item:active,
.accordion-header, .accordion-header:focus, .accordion-header:active,
.accordion-button, .accordion-button:focus, .accordion-button:active {
  outline: none !important;
}

似乎什么都不管用。有什么想法嗎？

以下是html代碼的副本:

<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">
        ...
      </div>
    </div>
  </div>
</div>

要移除陰影和藍色邊框顏色...

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
}

演示

你可以用

.accordion-button:not(.collapsed){
        box-shadow: none;
    }

在這里它會工作:

.accordion-item {
  border: none;
}

以下是我如何刪除它。類“item”是我的類，即它是我的自定義類。

.accordion .item .accordion-header button{
    background-color: transparent;
    box-shadow: none;
}

.accordion .item{
    border: 0;
}

<Accordion className="p-0"  alwaysOpen>
            <Accordion.Item eventKey="0" className="item">
              <Accordion.Header>Recent</Accordion.Header>
              <Accordion.Body className="d-flex flex-column">
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
              </Accordion.Body>
            </Accordion.Item>
            <Accordion.Item eventKey="1" className="item">
              <Accordion.Header>Groups</Accordion.Header>
              <Accordion.Body className="d-flex flex-column">
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
                <div className="container d-flex flex-row">
                  <Groups />
                  <span className="mx-2">Events</span>
                </div>
              </Accordion.Body>
            </Accordion.Item>
          </Accordion>