Disable Highlighting of

Question

I created a toolbar with a title and a back button inside:

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

With the following 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;
}

When i start it it looks like that:

enter image description here

End when i click on the back button it looks like that:

enter image description here

You can see a blue overlay over the image. How can i disable that overlay / highlightning?

Add CSS for `#toobar_back a:visited` – Barmar May 01 '15 at 20:43 — Barmar, May 01 '15 at 20:43

score 1 · Accepted Answer · edited May 23 '17 at 12:14

1

Taken from here, add the following to your CSS file:

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

Also similar Q&A here : Disable orange outline highlight on focus

and here : Can I remove Android default link styling in webview

edited May 23 '17 at 12:14

Community

1
1

answered May 01 '15 at 20:47

David Passmore

6,089
4
46
70

Disable Highlighting of

1 Answers1