单击按钮时如何删除蓝框填充？答案

【问题标题】：How to remove blue-box-fill when clicking the buttons?单击按钮时如何删除蓝框填充？
【发布时间】：2020-11-06 21:47:08
【问题描述】：

这是我在设备上屏幕录制的 gif，您可以在其中看到我所说的蓝框填充：

我试过这样做：

* {
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
};

button, 
button:active, 
button:focus {
  outline: none;
};

但它并不能消除那个蓝框填充，因为它不是真正的焦点边框或outline。

【问题讨论】：

这能回答你的问题吗？ How to remove Firefox's dotted outline on BUTTONS as well as links?
不，问题不在于边框或轮廓@StephaneVanraes，因为我已经处理好了。您是否仔细观看了随附的视频？
如果您的浏览器是 firefox，它有一个额外的边框，既不是边框也不是轮廓，这就是链接问题中的解释。老实说，我并没有在你的视频中看到问题，也许你也可以发布截图？
这能回答你的问题吗？ Disable Blue Highlight when Touch/Press object with Cursor:Pointer

标签： css

【解决方案1】：

您要查找的物业是tap-highlight-color

-webkit-tap-highlight-color: transparent;

【讨论】：

【解决方案2】：

我猜这发生在 iOS 上？

这应该可以防止蓝框出现：

-webkit-tap-highlight-color: transparent;

【讨论】：

感谢@doctypecode 的回答。但是不，它发生在所有操作系统上，而不仅仅是 iOS。

【解决方案3】：

我想你想要这样 ..

button {
  margin: 10px;
  padding: 10px;
  height: 50px;
  width: 50px;
  background: #0095ff;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  color: white;
}

#btn2 {
  outline: none;  
}

<button id="btn1">Click</button>
<button id="btn2">Click</button>

【讨论】：