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

Question

我有一个 button，里面有一段文字。我在 :active 和 focus 状态上设置了 outline 的样式，如下面的代码片段所示。我在 firefox 上有一个奇怪的行为：当我切换到 button 时，button 周围有一个 outline，按钮内的文本周围有第二个（请参阅屏幕截图如下）。我刚刚在 firefox 上遇到这个奇怪的问题。我怎样才能解决这个问题。我找到的关于我的问题的唯一答案是使用 outline: none;，但这不是我想要的。我想要 button.

周围的大纲

outline 在 chrome Windows 10:

outline firefox（问题）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>

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

Answer 1

试试这个：

CSS

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

The user-select property specifies whether the text of an element can be selected.

Answer 2

请使用以下代码：

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

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

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

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

Remove double outline on button and it's text inside

html

css

windows

firefox

outline