Bootstrap data-toggle="button"意外获焦，.focus类为何阻止按钮样式切换？

Hey there, let's unpack these two frustrating quirks you're hitting with Bootstrap's toggle buttons:

1. Why the button gets unexpected focus #

This is actually an intentional accessibility choice in Bootstrap's JavaScript. When you click a button with data-toggle="button", Bootstrap's JS triggers a focus() on the element to keep keyboard navigability intact—so users tabbing through your site can still interact with the button smoothly. For most cases this is helpful, but it can feel "unexpected" if you weren't anticipating the focus state sticking around.

2. Why .focus class blocks your style changes (instead of just .active like the docs) #

The core issue here is CSS specificity and style stacking. Bootstrap's default styles give the .focus state more prominent visual cues (like a box-shadow or adjusted background) that have higher priority than the .active state. When your button has both .active and .focus classes applied (which happens when you click and the button retains focus), the .focus styles override the .active ones—making it look like the toggle isn't working, even though the .active class is present.

The docs example avoids this because either:

• The demo automatically removes focus after click for cleaner visual presentation, or
• The docs use a setup where focus isn't retained post-interaction.

Fixes to try: #

For the unexpected focus issue

Add a simple click handler to remove focus from the button after it's toggled:

// Vanilla JS
document.querySelectorAll('.btn[data-toggle="button"]').forEach(btn => {
  btn.addEventListener('click', () => btn.blur());
});

// jQuery alternative
$('.btn[data-toggle="button"]').on('click', function() {
  $(this).blur();
});

For the .focus class blocking styles

Override Bootstrap's default styles to make .active take precedence when both classes are present. Add this to your custom CSS (make sure it loads after Bootstrap's CSS file):

/* Generic fix for all toggle buttons */
.btn.active.focus, .btn.active:focus {
  box-shadow: none; /* Remove the distracting focus glow */
  background-color: inherit; /* Inherit the active state's background */
}

/* Target specific button variants (e.g., primary) for precise control */
.btn-primary.active.focus, .btn-primary.active:focus {
  background-color: #007bff; /* Match the primary active background color */
  box-shadow: none;
}

内容的提问来源于stack exchange，提问作者AlvaroCryptogram