删除按钮上的双轮廓和里面的文本

Question

我有一个button，里面有一段文字。我在:active 和focus 状态上设置了outline 的样式，就像下面的sn-p 一样。我在firefox 上有一个奇怪的行为：当我进入button 时，在button 周围有一个outline，在按钮内的文本周围有一个outline（见下面的截图）。我刚刚在firefox 上遇到了这个奇怪的问题。我怎样才能解决这个问题。我发现的问题的唯一答案是使用outline: none;，但这不是我想要的。我想要button 周围的轮廓。

outline chrome Windows 10：

firefox 上的outline（问题）Windows 10：

.button__btn {
  background-color: transparent;
  border: 2px solid blue;
  font-size: 20px;
  padding: 8px 24px;
  text-align: center;
}

.button__btn:active,
.button__btn:focus {
  outline: 1px dotted black;
  outline-offset: 5px;
}

<div class="button">
  <button class="button__btn">I'm a default button</button>
</div>

这里还有一个 codepen：https://codepen.io/STWebtastic/pen/EORBpE

Answer 1

请使用以下代码：

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

它将删除所有按钮的Firefox内部轮廓。

这里也提到了这个建议：How to remove Firefox's dotted outline on BUTTONS as well as links?

Answer 2

试试这个：

CSS

.button{
     -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer - Edge */
          user-select: none; /* Chrome and Opera */
}

user-select 属性指定元素的文本是否可以 被选中。