时间戳

首页 > 解决方案 > CSS 从 Chrome 中的链接中删除朦胧的蓝色边框，更喜欢 Firefox 方法

css - CSS 从 Chrome 中的链接中删除朦胧的蓝色边框，更喜欢 Firefox 方法

问题描述

首先：这可能不是 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 中删除朦胧的蓝色边框？

标签： cssgoogle-chromefirefoxanchor

解决方案

这种效果称为焦点环，适用于通过鼠标单击、屏幕点击或使用键盘上的 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;
}

推荐阅读