Bootstrap checkbox toggle buttons - Rahmen verschwindet nicht, wenn die Checkbox nicht "gechecked" ist.

[ebody]

Hallo,

https://getbootstrap.com/docs/5.1/forms/checks-radios/#checkbox-toggle-buttons

https://codepen.io/ebody/pen/qBPOxRy

Klickt man auf den Button erscheint ein Rahmen drum herum. Klickt man nochmal bleibt dieser. Ist das von Bootstrap wirklich so gewollt oder ist das ein Bug?

Muss man da jetzt selber noch CSS ergänzen, damit der Rahmen verschwindet oder bietet Bootstrap dafür etwas vorgefertigtes an? Eine Klasse z.B. die man noch in den HTML Code einbauen kann?

Gruß ebody

[Gunnar Bittersmann]

@@ebody

Klickt man auf den Button erscheint ein Rahmen drum herum. Klickt man nochmal bleibt dieser. Ist das von Bootstrap wirklich so gewollt oder ist das ein Bug?

Das ist gewollt. Wenn man auf einen Button clickt, erhält er den Fokus. Der Fokus wird durch einen Rahmen drum herum sichtbar gemacht.

Du kannst den Rahmen aber entfernen, wenn die Fokussierung per Mausclick erfolgt (aber nur dann!):

.btn-check:focus:not(:focus-visible) + .btn-primary, .btn-primary:focus:not(:focus-visible) {
  box-shadow: none;
}

☞ Codepen

background-color und border-color zurückzusetzen wäre dann etliches an Mehraufwand, insb. wenn man das für :focus:not(:focus-visible):hover nochmals setzen müsste.

Muss man da jetzt selber noch CSS ergänzen, damit der Rahmen verschwindet oder bietet Bootstrap dafür etwas vorgefertigtes an?

Keine Ahnung. Musste mal im Bootstrap-CSS-Code nach :focus-visible suchen.

Generell ist es aber wohl keine gute Idee, eine Checkbox + Label wie ein Button aussehen zu lassen. Wenn du einen Toggle-Button willst, willst du einen Toggle-Button.

😷 LLAP