html - 单击按钮禁用文本选择

Question

当用户单击按钮时，如何避免在文本周围出现一个虚线选择矩形，请参见下图。我已经尝试添加 css 规则 user-select: none;，这是我在另一个问题中看到的，但这似乎不起作用。

有什么建议吗？

编辑:该问题仅出现在 Firefox 中(使用 47.0 版测试)

.button {
  background-color: #1a1a1a;
  border: none;
  color: #f8f8f8;
  padding: 10px 40px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  border-radius: 4px;
  user-select: none;
  -webkit-transition-duration: 0.3s;/* Safari */
  transition-duration: 0.3s;
}
.button:hover {
  background-color: #595959;
  /* Green */
  color: white;
}

<button class="button">Button</button>

Answer 1

对于在 Firefox 中删除按钮中的虚线边框:

button::-moz-focus-inner {
  border: 0;
}