LoginSignup
atat1373
@atat1373

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

Bootstrap5 アコーディオンメニューについて

Bootstrap5でアコーディオンを使用してメニューバーを作成しています。
その際、右側に矢印が表示されますが、矢印の色の変更方法が分かりません。

どなたかご教示いただけますでしょうか。

0

1Answer

スクリーンショット 2024-04-30 002108.png

.accordion-button クラスの after に、対象となる矢印(background-image)が指定されています。SVG画像のため、色が変更できます。

デフォルトの値が下記のようですが、 fill の値がカラーコードになっています。
「#212529」がデフォルトカラーコードです。

url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%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")

赤(#ff0000) に変えたい場合は、「%23ff0000」に書き換えて、現行の background-image を CSS で上書きするようにします。

url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff0000'%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")
0

Your answer might help someone💌