How do you avoid the annoying grey background that IE 10 applies to anchors when you click them?
There is actually a really easy CSS fix. IE 10 changes the background-color of anchor tags when they are in the :active state. To stop it from happening or to change the colour you can use the CSS rule below.
a:active{
background-color: transparent; /* Can be any colour, not just transparent */
}
Live demo: http://jsfiddle.net/tw16/NtjK7/
On a side note, it's worth mentioning that when styling links you need to ensure that you write the rules in the correct order to ensure that previous styles don't get overwritten:
a:link{} /* 1st */
a:visited{} /* 2nd */
a:hover{} /* 3rd */
a:active{} /* 4th */
I found it was actually :focus that added the grey background.
this worked for me:
a:focus {
background-color: transparent;
}
I haven't been able to find many information but I did found one fix:
Wrap the text of the anchor in a span
Working Solution
If you don't want to change every anchor in your HTML you can use a script like this one:
$("a:not(.dont-use-span)").each(function() {
$(this).html("<span>" + $(this).html() + "</span>");
});
Working solution
Note: just add the class dont-use-span to the anchors that you don't want to modify
After many unfructuous tests, I finally made it works with this :
a {color:#fff; background-color:#f77927 !important;}
a:hover {color:#fff; background-color:#e65e06 !important;}
a.active {color:#fff; background-color:#e65e06 !important;}
a.focus {color:#fff; background-color:#e65e06 !important;}
See in action
Related
Compare this - http://bootswatch.com/2/cerulean/ and this - http://bootswatch.com/cerulean/ (third bootstrap), when you in 3rd version click on "Download" at the top of the page and right at once then click it again and move pointer away from it - everything is OK, but if you try to do the same in 2nd version - you will see focus border on element and darker background, I have solved it by adding
.navbar .nav>li>a:focus {
background-color: rgba(0,0,0,0);
}
.navbar .nav>li>a:focus:hover {
background-color: #1684c2;
}
.dropdown-toggle {
outline: none !important; }
But I assume that it is not the best solution or may be not crossbrowser - that is my question.
Setting an !important tag on an element is not usually considered best practice, but if you use the implement the outline property on your a element that should work as in:
a:focus {outline: 0px none;}
I started using bootstrap now and really like it but a problem came up now.
I made an adapted navbar and when a tab is selected, there is a spotted border that I dont like. How can I prevent this border (CSS)?
Can you add some code?
I think somewhere in your CSS you will find something like: border: 1px dotted #ccc; Change that to: border: none;
Depending on what class/id you have it will be something along the lines of:
border:none;
I am going to go out on a limb and assume the HTML for your tab is an . If so, make sure you are explicitly defining the border you want in all of its states (CSS psuedo-classes), specifically :active
a:link {border-width:0;} /* unvisited link */
a:visited {border-width:0;} /* visited link */
a:hover {border-width:0;} /* mouse over link */
a:active {border-width:0;} /* selected link */
http://www.w3schools.com/css/css_pseudo_classes.asp
I am trying to change the color of a link. It is defaulted to blue and I want to override it. I did the following:
#site-links a:link{color:red;}
and in Chrome's Inspect Element that was the style which overrode all other styles. However, the link remained blue. In Firefox, however, the link is now red.
How can I fix this?
:link targets specifically a link you have not visited. I'm going to go ahead and assume that in chrome you have visited it. You can fix it by targeting each case as you need it:
a:link { color: red; } /* unvisited link */
a:visited { color: blue; } /* visited link */
a:hover { color: green; } /* mouse over link */
a:active { color: yellow; } /* selected link */
One way to give higher priority to your rule is stating important in it.
a:link { color: red ! important }
Also, when in Chrome inspector , to better control what is happening, you can force the state of the inspected element
When in the element inspector, go to the top of the "styles" bar in the right pane. There is an option that states:
"toggle element state"
There you can check / uncheck the :visited status
It seems that a:visited won't work in showing background color on my links.
http://jsfiddle.net/davestein/D2srA/
What super simple thing am I missing?
The background-color on a:visited only seems to work (as Dave said above, in FF, Chrome and Safari) if the normal a has a background-color, either explicitly defined or through inherit (the direct parent must actually have a background-color for this to be true).
Obviously it is not ideal to have to define a background-color for a all the time, as the site may have a background image.
CSS bug..?
try a) setting a default background color (like #fff) and b)removing !important, as shown here:
http://jsfiddle.net/D2srA/10/
I'm not sure of the technical reason here, but this only seems to work for me if I add a background-color for a:
a {
background-color: #ffffff;
}
a:visited {
background-color: #ff0000;
}
it doesn't work for me if I do it like you do. But if I add every pseudo-class it works. E.g.:
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF; background-color:black;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
!important always does the truck
a:active {color:#0000FF !important;}
a:visited {color:#0000FF !important;}
Am using css for some site. I noticed that the a:active style definition in my css file does not work at all. I was told by someone that I have to put the definitions in this order
a:link {...}
a:visited {...}
a:hover {...}
a:active {...}
I have done so but it's still not working. Please could someone tell me why it is not working and a possible workaround. Thanks
Here is a working example:
http://jsfiddle.net/BMHUz/
Click and hold on the anchor tag and you will see it turn orange.
a:active just stay for the few milliseconds you are clicking the link.
May i ask what you expect to see? In case you want a link to be a different color if you are on that page, thats not what a:active is for
If you want a link to be a different style if you are on that page, then you need to use jquery or javascript to change the style of active link.
jquery
$('a[href="' + window.location.href + '"]').addClass('active');
CSS
a.active{
/* your CSS for active link */
}
Put !important to the property if it is already defined to the anchor.
a {
color: white;
}
a:active {
color: black !important;
}