如何去除button按钮被点击后出现的外轮廓边框

你遇到的黑色外轮廓是浏览器为可聚焦元素默认添加的:focus状态轮廓样式，和你尝试的user-select: none属性无关：该属性作用是禁止用户选中元素内的文本，所有元素都可使用，并非仅适用于单选按钮，也无法解决焦点轮廓的显示问题。

可通过以下CSS方案解决问题：

• 方案1：直接移除该按钮的焦点轮廓（兼容性最好，适合游戏场景无需键盘导航的情况）
  给重置按钮添加如下样式：

  #reset:focus {
    outline: none;
  }
  

• 方案2：兼顾无障碍访问的优化方案
  如果你需要保留键盘导航（按Tab键切换按钮）的焦点提示，仅隐藏鼠标点击触发的焦点轮廓，可使用:focus-visible伪类实现：

  /* 隐藏鼠标点击触发的焦点轮廓 */
  #reset:focus:not(:focus-visible) {
    outline: none;
  }
  /* 自定义键盘触发的焦点轮廓样式，可按需调整颜色、宽度 */
  #reset:focus-visible {
    outline: 2px solid #409eff;
    outline-offset: 2px;
  }
  

• 移动端额外适配
  如果是移动端H5游戏，点击按钮还会出现默认的灰色半透明高亮层，可额外添加如下样式：

  #reset {
    -webkit-tap-highlight-color: transparent;
  }
  

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