当我在Firefox中单击它时，如何删除我的图像按钮上的虚线？答案

【问题标题】：How do I remove the dotted line on my image button when I click it in firefox?当我在Firefox中单击它时，如何删除我的图像按钮上的虚线？
【发布时间】：2014-08-03 02:23:28
【问题描述】：

我正在使用这个jfiddle。在chrome中，当我单击图像时，它不会产生虚线，但是当我在Firefox中单击图像时，会出现虚线。

如何去掉虚线？

我试过了：

#myButton:focus {
  outline: 0;
}

#myButton:active {
  outline: none;
  border: none;
}

但这没有用。

【问题讨论】：

在我的 Firefox 上看不到它
有边框是因为图片被选中了。要摆脱它，请选择其他内容。
只有在tab-focus时才能看到。
@nix ...我从不希望用户在单击图像时看到它。
@imbondbaby 我使用的是 Firefox 26.0 版

标签： html css firefox dotted-line

【解决方案1】：

试试这个：

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

button 可以替换为您想要禁用该行为的任何选择器。

PS：它也可以在没有选择器的情况下使用::-moz-focus-inner。

JSFiddle Demo

【讨论】：

【解决方案2】：

Here is updated jsfiddle code

基本上你想用javascript模糊它。如果使用 jquery：

$(function() {
    var button = $("#myButton");
    $(button).focus(function() { 
        $(this).blur();
    }); 
});

或者没有像这样的 jquery：

var button = document.getElementById("myButton");
button.onfocus = function() { button.blur(); }

通过我在 Ubuntu 上的 Firefox 测试，原来的 jfiddle 产生了虚线，更新后没有。

【讨论】：