从 Bootstrap 5 手风琴按钮中删除轮廓答案

【问题标题】：Remove the outline from Bootstrap 5 accordion buttons从 Bootstrap 5 手风琴按钮中删除轮廓
【发布时间】：2021-07-31 08:58:07
【问题描述】：

当您查看Bootstrap 5 accordion 时，您会看到一个大纲。我想删除它。我不确定哪个元素实际产生了轮廓，但我怀疑它是button。无论如何，我都尝试将以下内容应用于所有可能的元素：

.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>

【问题讨论】：

你正在写的css中有很多条件，你可以保持简单在你想勾勒的元素末尾添加另一个新类吗？像这样：在 css 中：.outline-none {outline: none !important; } 在元素末尾添加 outline-none 类
谢谢，但我什至试过了。不工作。
它不是来自轮廓，它在焦点上显示 box-show 添加这个：“.accordion-button:focus {box-shadow: none;}”
拯救了我的一天@SatishModha。如果您发布答案，我会很乐意接受。请加!important，好像有必要。

标签： css twitter-bootstrap bootstrap-5

【解决方案1】：

要去除阴影和蓝色边框颜色...

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

Demo

【讨论】：

非常感谢@Zim。我每小时挣扎 1/2 以摆脱边界。现在来弄清楚如何使插入符号（一个 svg）变成浅色。

【解决方案2】：

你可以使用

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

【讨论】：