Bootstrap toggle button instant outline state

AkiZukiLenn 0
Viewed 35

I am using bootstrap 5.0 (the one that can import from inline html) to create a toggle outline button like below.

<button type="button" class="btn btn-outline-dark" data-bs-toggle="button" autocomplete="off" aria-pressed="false" >{{mode}} Mode</button>

In first click, color change instantly from transparent to fill. But the issue is, if i click the second time, the toggle button don't instantly change the color from fill to transparent. You have to click elsewhere to let it change back to transparent.

How can I make the color change from fill to transparent instantly after the click instead of the need to click somewhere else?

toggle bootstrap-4 css angular html
1 Answers

You mean like this?

styles.css

.btn-check:focus + .btn-outline-dark,
.btn-outline-dark:focus {
  box-shadow: none !important;
}

.btn-check:focus + .btn,
.btn:focus {
  outline: 0;
  box-shadow: none !important;
}

forked stackblitz

Naren Murali0
Related