按钮类切换及多选按钮样式异常求助：从btn-default改至btn-success

嘿，我完全懂你遇到的烦恼——单选时按钮样式切换顺顺当当，但多选状态下之前选中的按钮顶部会冒出来蓝色，这十有八九是浏览器默认的焦点样式在捣乱！下面给你一套实打实的解决方案：

第一步：修正jQuery逻辑，精准切换选中状态 #

先把按钮的点击事件逻辑理清楚，确保每一次点击都能正确切换样式，同时处理好多选场景：

$(document).ready(function() {
  // 给所有按钮选项绑定点击事件
  $('.btn-option').on('click', function() {
    const $btn = $(this);
    // 切换选中标记类
    $btn.toggleClass('is-selected');
    // 切换按钮样式类：默认 ↔ 成功绿
    $btn.toggleClass('btn-default btn-success');
    // 手动移除焦点，彻底避免浏览器默认焦点样式
    $btn.blur();
  });
});

第二步：覆盖浏览器默认的焦点/活跃样式 #

那个蓝色顶部就是浏览器给:focus或:active状态元素加的默认轮廓，我们直接在CSS里把它干掉：

/* 移除按钮的默认焦点轮廓和阴影 */
.btn-option:focus,
.btn-option:active {
  outline: none !important;
  box-shadow: none !important;
}

/* 可选：给选中状态加额外标识（比如边框） */
.btn-option.is-selected {
  border: 1px solid #2ecc71;
}

第三步：参考HTML结构 #

确保你的多选按钮组是类似这样的结构（用按钮模拟多选选项）：

<div class="multi-select-group">
  <button class="btn btn-default btn-option">选项A</button>
  <button class="btn btn-default btn-option">选项B</button>
  <button class="btn btn-default btn-option">选项C</button>
</div>

问题根源说明 #

之前出现蓝色，是因为多选时你点击过的按钮会保留:focus状态，浏览器默认会给焦点元素加蓝色轮廓提示。我们通过blur()手动移除焦点，再用CSS强制覆盖默认样式，就能彻底解决这个小问题啦！

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