禁用 <a> 的突出显示答案

【问题标题】：Disable Highlighting of <a>禁用 <a> 的突出显示
【发布时间】：2015-07-11 17:59:47
【问题描述】：

我创建了一个工具栏，里面有一个标题和一个后退按钮：

<header id="toolbar">
    <div id="toolbar_back">
        <a href="#/">
            <img src="img/toolbar/toolbar_back.png" />
        </a>
    </div>
    <h1 id="toolbar_title">Photo Prints</h1>
</header>

使用以下 CSS：

#toolbar {
    background: #FFFFFF;
    height: 60px;
    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: 0px 2px 1px #888888;
    display: table;
}

#toolbar_title {
    color: black;
    font-size: 30px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

#toolbar_back {
    height: 40px;
    width: 40px;
    padding-left: 10px;
    display: table-cell;
    vertical-align: middle;
}

#toolbar_back img {
    background-image: url("../img/toolbar/toolbar_back.png");
    background-size: cover;
    background-repeat: no-repeat;
}

#toolbar_back img:active,
#toolbar_back img:focus {
    background-image: url("../img/toolbar/toolbar_back_pressed.png");
    background-size: cover;
    background-repeat: no-repeat;
}

当我启动它时，它看起来像这样：

当我点击后退按钮时结束，它看起来像这样：

您可以在图像上看到蓝色叠加层。如何禁用该覆盖/突出显示？

【问题讨论】：

为#toobar_back a:visited添加CSS

标签： html css

【解决方案1】：

取自here，将以下内容添加到您的 CSS 文件中：

a {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

这里也有类似的问答：Disable orange outline highlight on focus

这里：Can I remove Android default link styling in webview

【讨论】：