删除按钮上的双轮廓及其内部的文本

Question

我有一个button，其中带有文本。我在outline和:active状态下设置了focus的样式，就像在下面的代码段中一样。我在firefox上有一个奇怪的行为：当我进入button时，outline周围有一个button，而按钮内的文本旁边有一个{{1}下面的屏幕截图）。我在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>

这也是一个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

Traceback (most recent call last):
  File "run_tests.py", line 14, in <module>
    p.communicate(input=command)[0]
  File "c:\python27\lib\subprocess.py", line 465, in communicate
    self.stdin.write(input)
ValueError: I/O operation on closed file

  

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