How to use CSS to increase the contrast on visited hyperlinks?


Tags: css,css3,accessibility

Problem :

I am using a browser custom-CSS for changing the color visited hyperlinks to magenta, just to be able to see what I clicked or not.

The problem is that in some cases the contrast is too bad for this and I do want to add some kind of glowing around the text from the CSS, just to be able to improve the contrast.

I tried to follow some guides I found online for adding this but I seen no effect on my test pages.

text-shadow: 2px 2px 3px red !important;

Note: I tried this only on Safari and Chrome (OS X).



Solution :

After some research, I've found out that this is actually intended behaviour, due to privacy limitations. You may style:

  • Color
  • Background-color
  • Border-color
  • Outline color

Here's an article on the subject: https://developer.mozilla.org/en-US/docs/CSS/Privacy_and_the_:visited_selector


    CSS Howto..

    How do I align this CSS correctly?

    How to fix misaligned rows alt the last records, after using vertical scroll and frozen column?

    How do I add a link to my CSS background?

    How to center element in css?

    How should I override hover style of a div in an anchor tag?

    How can i change jquery-div creation to some other method

    How to create a speech bubble in css?

    How to set each type of page transition to a specific page? (css animations)

    How to scope efficiently javascript et css on a rails appliacation?

    Google App Engine: how to use the internal CSS in the template?

    How to partly color the border with css [closed]

    How can I remove the generic HTML/CSS tooltip? [duplicate]

    How can I force menu items to fit to column width?

    How to remove/reset/not inherit the CSS properties of a DIV/element/… within the same CSS document?

    How to apply CSS color on parent element using a color picker?

    How to change text-selection styles with javascript [duplicate]

    How to re-use common css rules in css( sass ) [closed]

    How Can I get my DL to style properly?

    Style
  • element with CSS background, to show only a part of images
  • How to use CSS to create a particular stylized, multi-lined text box?

    how to display products side by side

    How to make a navbar appear in certain section of the page? (bootstrap too)

    how to use automatic css hyphens with word-break: break-all?

    How do you make linked text act as if it is normal text?

    How to ensure that the css border goes inside the image

    How to add scrollable tooltip HTML?

    How to make a css navigation menu “selected” option still clickable

    How do I display a randomly generated list in columns with CSS?

    How do I load / unload css changes quickly on a plone + Zope site ? (noob)

    How to ignore parent css style