css 更改 accordion 显示颜色

lc8prwob  于 2022-12-24  发布在  其他
关注(0)|答案(2)|浏览(162)

大家早上好,
我有一个Bootstrap问题。我有以下HTML页面

<!DOCTYPE html>
<html lang="nl-NL">

<body>
    <div class="container-md">
        <br>
        <div class="accordion" id="accordionAikido">
            <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">
                        Lorem Ipsum Header
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                    data-bs-parent="#accordionAikido">
                    <div class="accordion-body">
                        <p>Lorem Ipsum</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="container-md">
        <p id="copyright">© Freddy Meijer</p>
    </footer>
</body>

</html>

我在CSS文件中稍微改变了 accordion 的颜色:

h4,
p,
#copyright {
    color: #fbfcfd;
    padding-left: 10px;
}

.accordion-body{
    background-color: #7aa8bd;
}

.accordion-button{
    background-color: #fbfbef;
}

但现在我遇到了一个问题,你可以看到折叠时的颜色是黄的,但当我打开 accordion 时,颜色是蓝色的:

我试了好几种方法,但我都不能把蓝色变成另一种黄色。我错过了什么?
我试着改变CSS中每个ID和类的颜色,但没有任何帮助。

.accordion-button.collapsed::after

建议使用this post,但不起作用。按钮仍为蓝色。

nfs0ujit

nfs0ujit1#

如果你添加了下面的CSS,那么当你打开 accordion 的时候,它会保持黄色。

.accordion-button:not(.collapsed) {
    background-color: #fbfbef;
}
2wnc66cl

2wnc66cl2#

请使用带有折叠按钮的类“bg-warning text-dark bg-opacity-10”。
请参阅this链接以了解。

相关问题