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..
Hi I just realized you can set all the properties in auto; and will do the trick. This is a self anwser but I guess someday someone can have the...
If I understand correctly, I think you want the "hover" properties to be applied to the boxes when the user hovers over the corresponding text. This can't be completed in...
Firstly, move your styles out of inline- then you can set the z-index of the triangle to be greater than that of the anchor, so it 'appears' on top, whilst...
Try this solution (jsfiddle.net/gustavocorrea/3mSjy/1/ broken). I added a class in your first "li" called active and I applied some rules CSS.
With the provided code - Update p tags to display inline-block and center the content of the header http://jsfiddle.net/vc3tkdq7/ p { display: inline-block; } #social-buttons-header{ text-align: center; display: block; width:...
You can use a span <h2><span class='q'>Q:</span> Does alfredo sauce contain soy?</h2> also remove display: inline from the class .q { padding-bottom: 15px; /*display: inline;*/ font-size: 35px; font-weight: 700; color:...
You missed this. #gateway { float: left; } ...
In the original layout, change the width of the second td to *. What's happening is that the table, and so the row, has a fixed amount of width to...
You have to reset each individual property back to its default value. It's not great, but it's the only way, given the information you've given us. In your example, you...
I try to avoid floats: http://jsfiddle.net/techsin/Gz4nv/1/ Things I did: Inserted Blank content which has its type set to inline-block (by default content added by css content:'etc' is inline element), and...
You need to declare the font family for the (pseudo-)element containing the special character so that you use only fonts that are known to contain that character. For example, add...
In JavaScript all css values with - are camel cased. so: name_button.style.margin-left = '125px'; Becomes: name_button.style.marginLeft = '125px'; and name_button.style.padding-right = '0px'; becomes: name_button.style.paddingRight = '0px'; ...
You are missing position: relative; applied to the class="page". This way the element which has absolute position applied knows that needs to be bottom:0 relative to the parent element .page....
Use :not: .beigeButton:not(.enabledButton) ...
You could try rearranging your markup to have both columns occur before the larger content area, remove the float on the larger area, and apply overflow:auto to it. This forces...
If you just want the HTML authored in CKEditor to look the same inside your page, first you must insert it inside a div element with a custom class, for...
.detail_div ul li span { // Some Styles } .detail_div ul li:last-child span { // UNDO above styles } The second definition only matches the last li. Edit: Or you...
You could achieve something similar to what you're looking for with CSS pseudo elements depending on the bullet style you want and if that can be achieved with a unicode...
You can use a css technique with multiple backgrounds here: .bg-secondary { background-image: url(fallback.png); background-image: url(image.svg), none; ----- ----- } This works because it just so happens that the browser...
It appears that to following works... .ui-widget#tabdiv :focus { border-style: inset !important; border-width: 3px !important; } Thanks!...
It's called an adaptive layout technique but more recently coined responsive web design (both great articles). A gallery of websites that employ this technique can be found at mediaqueri.es. The...
I haven't used Awesomium, but it's probably best to remove the scrollbars in CSS. Even if the whole outer web control/page has no scrollbars, the page can have an element...
http://jsfiddle.net/MBLZx/ html <div class="showhim"> HOVER ME <div class="showme">hai</div> <div class="ok">ok</div> </div> css .showme{ display: none; } .showhim:hover .showme{ display : block; } .showhim:hover .ok{ display : none; } ...