html - 禁用 <a> 的突出显示

Question

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

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

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

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

您可以在图像上看到蓝色叠加层。我怎样才能禁用该覆盖/突出显示？

Answer 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