单击时如何删除“虚线边框”？答案

【问题标题】：How to remove the "Dotted Border" on clicking?单击时如何删除“虚线边框”？
【发布时间】：2011-05-21 10:49:40
【问题描述】：

如你所见

我想在单击按钮后以某种方式删除虚线。有什么想法吗？

谢谢

GUYS：这是我的 CSS 和 HTML 的当前状态，但仍然没有使用：

.myButton input {
position:absolute;
display:block;
top: 5%;
left:87%;
height: 44px;
border:none;
cursor:pointer;
width: 43px;
font: bold 13px sans-serif;;
color:#333;
background: url("hover.png") 0 0 no-repeat;
text-decoration: none;
}
.myButton input:hover {  
background-position: 0 -44px;
color: #049;
outline: 0;
}
.myButton input:active {
background-position: 0 -88px;
color:#fff;
outline: 0;
}

input:active, input:focus {
      outline: 0;
}

<div class="myButton">
<input type="submit" value="">
</div>

好像什么都没有发生！！

【问题讨论】：

您应该保留它们以方便访问。
伙计们，我已经编辑了帖子..仍然没有用！！
你可以查看我更新的答案...
CSS Firefox - How to deactivate the dotted border ( firefox click indicator )? 的可能重复项

标签： javascript html css

【解决方案1】：

    #myElement { outline: 0; }

在你的元素上试试这个，我现在不知道是否是图像、div、按钮、链接。但它有效

【讨论】：

这是一个非常有用的答案。我有一个 div，我想从中删除轮廓，这很有效。内联，我的代码看起来像这样 <div> <img src="img/heatbar.png" alt="Bar"><a style="display:block;width:16.6%;height:80px;position:absolute;top:0px; outline: 0;" class="tilelink" href="#"></a></div> 这是一些代码的一部分，它在页面上显示 6 个“平铺区域”。每个区域都是可点击的，点击区域时不会出现轮廓。

【解决方案2】：

您必须将<a> 设置为：

a {outline: none}

【讨论】：

【解决方案3】：

使用下面的代码

a:active
    {
    outline: none;
    }

也可以试试其他浏览器

a:focus
{
-moz-outline-style: none;
}
a:focus { outline:none }

【讨论】：

我建议为此使用 CSS 类，因此所有其他链接仍保持“您曾在这里”的行为。

【解决方案4】：

尽管我对你的问题发表了评论，

您应该保留它们可访问性。

你可以找到your CSS-trick here for this

（无论如何，你应该保留它们。）

【讨论】：

【解决方案5】：

也可以使用纯 HTML：

<a href="..." hidefocus="hidefocus">...</a>

使用 JavaScript，您可以在所有链接上执行此操作：

window.onload = function WindowLoad(evt) {
   //hide focus:
   var arrLinks = document.getElementsByTagName("a");
   for (var i = 0; i < arrLinks.length; i++) {
       arrLinks[i].hideFocus = "true";
}

【讨论】：

我只在 ie7 和更早版本中遇到过这个问题。但添加 hidefocus 对我有用
干杯 @nate 很高兴这对你有用。 :)

【解决方案6】：

如果您想保持大纲处于活动状态并保持焦点，但在单击链接时将其隐藏，您可以在 css 中添加：

A.No-Outline {outline-style:none;}

并使用脚本：

$('A').hover(function() {
    $(this).addClass('No-Outline');
},function() {
    $(this).removeClass('No-Outline');
});

你必须在点击之前悬停，这样它就可以完成这项工作。

【讨论】：