如何去除分组切换按钮点击后的蓝色聚焦背景？

你遇到的是元素点击后获得焦点，浏览器默认显示聚焦轮廓的问题，这里有几种简单的解决方法：

方法一：给切换元素添加CSS移除聚焦轮廓 #

先给包裹+/-的<span>加个类名，方便统一写样式：

<span className="group-toggle" onClick={() => setShowGroup(!showGroup)}>
  {showGroup ? "-" : "+"}
</span>

然后在样式文件里添加：

.group-toggle:focus {
  outline: none; /* 移除浏览器默认的聚焦蓝色轮廓 */
}

如果想用内联样式快速实现，直接写在元素上也可以：

<span 
  onClick={() => setShowGroup(!showGroup)}
  style={{ outline: 'none' }}
>
  {showGroup ? "-" : "+"}
</span>

方法二：改用button元素（更符合语义规范） #

用<button>代替<span>做切换按钮更符合网页交互的语义逻辑，同时自定义样式去掉默认的按钮外观和聚焦轮廓：

<button 
  onClick={() => setShowGroup(!showGroup)}
  style={{
    background: 'transparent',
    border: 'none',
    cursor: 'pointer',
    outline: 'none' /* 移除聚焦轮廓 */
  }}
>
  {showGroup ? "-" : "+"}
</button>

方法三：设置tabindex让元素不获取焦点 #

给<span>添加tabIndex="-1"，这样点击后元素不会成为焦点，自然不会触发浏览器的聚焦样式：

<span 
  onClick={() => setShowGroup(!showGroup)}
  tabIndex="-1"
>
  {showGroup ? "-" : "+"}
</span>

额外提示 #

如果需要兼顾无障碍体验，不建议完全移除聚焦样式——键盘用户依赖聚焦状态来导航页面。可以把默认的蓝色轮廓换成贴合你页面风格的样式，比如：

.group-toggle:focus {
  outline: 2px solid #你的主题色;
  outline-offset: 2px;
}

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