CSS从Chrome中的链接中删除模糊的蓝色边框，建议使用Firefox方法

Question

首先：这可能不是Bootstrap问题，所以我在标题中省略了“ Bootstrap”，因为它显示了我在Firefox中的显示方式。

在Chrome中，单击表格中的编辑图标（或其他链接）会产生令人不愉快的模糊蓝色边框，如下所示：

在Firefox中，样式是计划外的，但看起来要好得多：

除了Bootstrap的table table-hover table-striped外，我的桌子上没有其他特殊样式。

<table class="table table-hover table-striped">
    <tr>
        <td>
            <a href="javascript:open('17');" ><img src="edit.png" /></a>
        <td>
    ...

如何从Chrome移除模糊的蓝色边框？

Answer 1

是因为使用了outline属性，请尝试删除轮廓

.table-striped a:active, .table-striped a:focus{
      outline: 0;
     -moz-outline-style: none;
}

Answer 2

在要为其禁用元素的元素类型上指定outline: none CSS属性。例如：

a { 
    outline: none; 
}

或

input[type="checkbox"] { 
    outline: none; 
}

Answer 3

这种效果称为聚焦环，它适用于通过鼠标单击，屏幕点击或使用键盘上的Tab键获得焦点的任何元素。

可以使用以下命令在浏览器中将其关闭：

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

请注意，关闭此选项会使具有可访问性的用户更难以进入您的页面。因此，您可以使用这种样式从浏览器的默认行为切换到更符合您网站外观的风格，同时吸引具有不同可访问性需求的受众。例如：

a:focus, a:active {
    outline: 4px dotted white;
    -moz-outline-style: 4px dotted white;
}