Can't override user agent stylesheet coloring my links

10,708

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;
}
Share:
10,708
hannebaumsaway
Author by

hannebaumsaway

I have a technical background with a creative bent, and over seven years of experience in telecom to go with it. These two pillars—development and design—of my professional persona lend themselves quite nicely to a focus on user experience in the software arena, be it mobile, the wired web, or next-gen interfaces.

Updated on August 07, 2022

Comments

  • hannebaumsaway
    hannebaumsaway almost 2 years

    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?