Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't override user agent stylesheet coloring my links

It's always these simple problems that snag me.

I have a very simple page I'm building, and I want the hyperlinks to not be colored specially at all (not blue originally, not purple for visited) or underlined.

I've done this in other sites before without issue simply by using

a, a:visited, a:hover, a:active {
    text-decoration: none;
    color: none;
}

However, in this particular site, that's not doing the trick for the color, while the underline is successfully removed. I even tried adding the dreaded !important tag, with no effect.

This issue has been seen on Chrome, IE 11, and Android (WebView).

When I inspect the links using Chrome's Developer console, it's pulling its color attribute from the user agent stylesheet, specifically:

a:-webkit-any-link {
    color: -webkit-link;
}

So I tried overriding this explicitly in my stylesheet by adding a:-webkit-any-link to my list of tags to apply the color: none attribute to, again, to no effect. I also added a:any-link and a:link in various combinations, to no avail.

Thoughts on the obvious solution I'm overlooking?

like image 651
hannebaumsaway Avatar asked Jun 19 '14 14:06

hannebaumsaway


People also ask

What is the user agent stylesheet?

User-agent, or browsers, have basic style sheets that give default styles to any document. These style sheets are named user-agent stylesheets. Most browsers use actual stylesheets for this purpose, while others simulate them in code. The end result is the same.

WHAT IS A :- webkit any link?

The :any-link CSS pseudo-class selector represents an element that acts as the source anchor of a hyperlink, independent of whether it has been visited. In other words, it matches every <a> or <area> element that has an href attribute. Thus, it matches all elements that match :link or :visited .


1 Answers

As the comments said color:none; is not valid css.

This should work:

a, a:visited, a:hover, a:active {
    text-decoration: none;
    color: inherit;
}
like image 72
Razzildinho Avatar answered Sep 20 '22 22:09

Razzildinho