How to Disable Automatic Links Coloring Without Selecting a Color

How to disable automatic links coloring without selecting a color?

If you don't want any coloration just do something like this:

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

Disable color change of anchor tag when visited

You can't. You can only style the visited state.

For other people who find this, make sure that you have them in the right order:

a {color:#FF0000;}         /* Unvisited link  */
a:visited {color:#00FF00;} /* Visited link    */
a:hover {color:#FF00FF;}   /* Mouse over link */
a:active {color:#0000FF;}  /* Selected link   */

CSS a:link keep original color

Try this in your stylesheet:

a:link {
   color:inherit;
}

Note that you then probably should make sure you have some other way to identify links, or your users will be confused. (I.e. don't remove the underlining, too.)

If you want to deal with browsers not supporting inherit, I suppose repeating the definition which originally set your color will do.

As an example, assume the class important should be shown in red:

.important {
    color:red;
}

.important a:link {
    color:red;
}

But of course it is not nice to have to double all color indications. I assume one could do something in JavaScript (looping through all the a elements and giving them the right class explicitly). (I have no IE available to test this.)

How do I remove the default link color of the html hyperlink 'a' tag?

The inherit value:

a { color: inherit; } 

… will cause the element to take on the colour of its parent (which is what I think you are looking for).

A live demo follows:

a {
  color: inherit;
}

<p>The default color of the html element is black. The default colour of the body and of a paragraph is inherited. This
  <a href="http://example.com">link</a> would normally take on the default link or visited color, but has been styled to inherit the color from the paragraph.</p>

How can I disable the bootstrap hover color for links?

if anyone cares i ended up with:

a {
    color: inherit;
}

Blue and Purple Default links, how to remove?

You need to override the color:

a { color:red } /* Globally */

/* Each state */

a:visited { text-decoration: none; color:red; }
a:hover { text-decoration: none; color:blue; }
a:focus { text-decoration: none; color:yellow; }
a:hover, a:active { text-decoration: none; color:black }

How to change link color when clicked?

You could use a combination of the tabindex attribute and :focus selector to your anchor elements.

http://jsfiddle.net/dcNzt/

HTML

<a href="#" tabindex="1">Stays blue</a>

CSS

a {   
    color: black;   
}

a:active {
    color: blue;
}

a[tabindex]:focus {
    color:blue;
    outline: none;
}

css styling links - getting messed up with a href's

Just add the following CSS:-

.menu a:hover {
        cursor: pointer;
        -webkit-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
         color: #000000;
}

.menu a:hover {
        color: #2693ff;
}

https://jsfiddle.net/mac3Lgv6/

How to disable text decoration with CSS?

In addition to Bariock's answer, this will help reset your <a> links in all circumstances to your specified css.

a:visited, a:hover, a:active, a:focus {
   color: yourColor !important;
   text-decoration: none !important;
   outline: none !important;
}

The !important signifies that it has a higher precedence than that of other rules declaring the same values for the same selectors. Note: you can still style them separately such like you would with :hover.

---

Related Topics