CSS 移除 Chrome 中 link 的模糊蓝色边框，更喜欢 Firefox 方法

Question

首先：这可能不是 Bootstrap 问题，所以我将 "Bootstrap" 排除在标题之外，因为它显示了我希望在 Firefox 中使用的方式。

在 Chrome 中，单击 table（或其他链接）中的编辑图标会出现令人不快的模糊蓝色边框，如图所示：

在 Firefox 中，样式未计划但看起来更漂亮：

除了 Bootstrap 的 table table-hover table-striped 之外，我的 table 没有特别的造型。

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

如何去除 Chrome 中模糊的蓝色边框？

Answer 1

是因为轮廓属性，去掉轮廓试试

.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;
}

CSS 移除 Chrome 中 link 的模糊蓝色边框，更喜欢 Firefox 方法

CSS remove hazy blue border from link in Chrome, prefer Firefox method

css

anchor

firefox

google-chrome