禁用文本选择onclick按钮

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

有什么建议？

编辑：这个问题只出现在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>

来源

2016-07-22 d4rty

'概述：无;'但有时它是有用的.. – moped

没有选择在你的代码剪断。对于所有浏览器都有问题？ – onestarblack

我使用Opera，Chrome和Firefox对其进行了测试。只有在Firefox中出现这个矩形。（我使用了所有浏览器的最新版本） – d4rty

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

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

来源

2016-07-22 12:32:28 blonfu

这是有效的。但为什么我必须在Firefox中执行此操作？其他浏览器没有在点击上添加虚线边框 – d4rty

是出于可访问性原因。从MDN开始：“为便于使用，Firefox会在焦点按钮上添加一个小点边框，这个边框是通过CSS在浏览器样式表中声明的，但如果需要的话，可以使用'button'来添加自己的焦点样式：：-moz-focus-inner {“'”[source]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button） – blonfu

简单地把这个在你的CSS：

.yourclass 
{ 
outline:none; 
}

希望它可以帮助。

来源

2016-07-22 12:26:07 souki

这并不能解决Firefox 47.0中的问题 – d4rty

button.button:focus { 
    outline: 0; 
}

来源

2016-07-22 12:38:35

禁用文本选择onclick按钮

回答

相关问题