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

    CSS3 - How to “restore” ::-webkit-scrollbar property to the default scroll bar

    How do I apply properties to a previous sibling on hover?

    HTML5 CSS (How to on hover image ignore transparent)

    Using Bootstrap, how do i achieve this horizontal tab layout? [closed]

    How to center a block of social icon background images?

    How to style a subset of some text in HTML/CSS?

    how to put 6 divs in the same line?

    How to change this table layout to a css layout?

    How can I nullify css property?

    How to get this simple layout done with CSS?

    Unicode down triangle doesn't show up in IE9

    How to apply more than 1 CSS styles in javaScript? [duplicate]

    How to place a footer at the bottom of a page in CSS?

    How to apply format depending on absence of a CSS class?

    How to make this CSS layout

    How to apply ckeditor css to output

    how to bypass style in element that is automatically applied through class?

    how can I use CSS to hover over an entire list element including the bullet?

    How to apply SVG so that it works in IE background image

    How can I build a CSS selector that will highlight/outline a focused tab, while not effecting other non-tab widgets?

    How do I make my website’s layout work gracefully with different browser window sizes, like Tumblr does?

    How To Remove Awesomium.net Scroll Bars? & Auto Scroll?

    CSS: On hover show and hide different div's at the same time? [duplicate]

    How can I change the content of