Whenever I click on an anchor in Mobile Firefox, it draws a blue border around the <a>, which persists after the anchor has been clicked. Here is a screenshot of how this looks:
In order to remove this border, I have tried adding the following to my CSS, to no effect:
a {-moz-user-select: none;}
a:link { outline:none; }
a:visited { outline:none; }
a:hover { outline:none; }
a:active { outline:none; }
a:focus { outline:none; }
I have also tried adding the following snippet to my JavaScript on DOM ready, also to no effect:
$("a").live('click',function(event) {
if (document.selection)
document.selection.empty();
else if (window.getSelection)
window.getSelection().removeAllRanges();
});
Is this blue border styleable? How can I get rid of it?
Minimal Test Case (example)
Here is a reduced example of a page that manifests this behavior:
<!DOCTYPE html>Test
Rendering
Related
I've got a CSS prob i'd love some help with.
My site (www.melodylakerart.com) has a 'Read More' link in its cookie notice bar (to the right of the privacy notice).
The 'read more' link is currently only visible on mouse over. Since the cookie bar is black I therefore assume the link text is black untill mouseover
I just want to make the text a colour other than black so you can see the link without having to mouseover. I've tried the below CSS with no luck. Can anyone help?
.cn-more-info .cn-privacy-policy-link .cn-link .button {color: #feb8b4 !important;}
.cn-privacy-policy-link {color: #feb8b4;}
.cn-more-info .cn-privacy-policy-link .cn-link .button {color: #feb8b4;}
Link color can be changed via a:link or under a specific class
.cn-privacy-policy-link a:link
for example:
a:link {
color: red;
text-decoration: none;
}
a:visited {
color: green;
}
a:active {
color: black;
}
a:hover{
color: #bada55;
}
.test a:link{
color: yellow;
}
Example
<div class="test">Yellow link</div>
You can also change the link color on hover by a:hover or the link color after being clicked by a:visited or while being clicked with a:active
The problem is that you have this:
input[type="submit"], button, .button {... color: #000000!important; ...}
And that is the classic reason why !important is a bad practice.
If all other parts work as expected, you need to trigger one of the element's classes. For instance: cn-privacy-policy-link {color: #feb8b4!important;} will work.
I have a piece of code I've written, which I have placed above a section of minified CSS:
.scroll-fixed-navbar {
background-color: black !important;
}
.banner-list li i {
color: #f86900 !important;
}
.btn-primary {
background-color: #f86900 !important;
}
#nav li a {
color: #f1861d !important;
}
#nav li:hover {
color: #a8a89b !important;
}
[Huge chuck of minified code containing Font Awesome and Twitter Bootstrap]
On one server this works as expected, and the link items fade to grey on hover. On another server, however, the on hover effect does not trigger. I've tried opening the li elements in the inspector, but even on the server where the effect is working, the CSS doesn't appear to show up:
I saw somewhere that the :hover pseudo-class should only be applied to the a element, but I looked at the W3C wiki, and there is no mention of this there. Can I apply :hover to the li parent of an anchor in this way, or is it illegal code? Might the Bootstrap and/or Font Awesome code be overriding the CSS? Or is the problem likely to be caused by something else?
I think this:
#nav li a {
color: #f1861d !important;
}
is overriding this:
#nav li:hover {
color: #a8a89b !important;
}
Why do you set the :hover on the li? Try targeting the a element after the li:hover:
#nav li:hover a {
color: inherit !important;
}
I have read through many questions about styling of jQuery UI autocomplete however I still have a problem that I can not solve. I am creating custom rendering like this:
$('.license-input').autocomplete({
source: "{{url(LaravelLocalization::getCurrentLocale().'/ajax/license')}}",
minLength: 2,
delay: 250
}).autocomplete('instance')._renderItem = function( ul, item ) {
return $('<li>')
.append('' + item.name + '')
.appendTo(ul);
};
So my <li> items contain links.
Now I want to style the dropdown and I use the following CSS (I have exaggerated the colors for visibility):
ul.ui-autocomplete li
{
border:none;
background-color:#f505f5;
padding:10px 16px;
font-size:12px;
outline:0;
}
ul.ui-autocomplete li:hover
{
background-color:#05e5e5;
}
ul.ui-autocomplete li a
{
border:none;
background-color: #f505f5;
}
ul.ui-autocomplete li:hover a
{
border:none;
background-color: #05e5e5;
}
However, the links does not get styled. What puzzles me the most is what I see when inspecting the result in Chrome's debugger:
You can see that the computed style for the active <a> element is the blue color, however the item itself has white background. What is this white thing that I should style?
I have already tried various selectors like .ui-state-active, .ui-state-hover, ui-state-focus, ul.ui-autocomplete li a:hover and others.
Note: the border: none; rule from the ul.ui-autocomplete li:hover a actually gets applied - without it the style looks different (has 1px black border around the link). So the only problem is the background.
Looks like the link in the list item has a background-image set. This will override any background colors you use.
You can set the background-image: none for that particular link
Something like:
ul.ui-autocomplete li:hover a
{
border:none;
background-color: #05e5e5;
background-image: none;
}
Example of link with background image and one without:
https://jsfiddle.net/yuwhuwkz/1/
I am using the hack to get the current view as the active state. Seen here:
<div class="navlinks1" ng-class="{active: $state.includes('myanmar')}"}>
<a ui-sref="myanmar">Myanmar</a>
</div>
My css looks like this:
.navlinks1{
margin:0;
padding:0;
border-bottom:1px solid #e6e6e6;
font-size:14px;
margin-left:0px;
}
.navlinks1.active {
background-color: #bdecff;
color:#ffffff !important;
}
.navlinks1 a:active {
color:#ffffff !important;
}
So that works to change the background. What isn't changing are the link colors. I suspect the a:active is not working.
Does anyone know how to change active link colors with UI-Router such that the links to the current view are a different color?
Thanks.
This should work fine, I think the issue is your style for the link:
.navlinks1 a:active {
color:#ffffff !important;
}
If you want these link colors to change when $state.includes('myanmar'), your css rule should look like this:
.navlinks1.active a {
color:#ffffff !important;
}
please consider these styles:
a:link { color: blue }
a:visited { color: red }
a:hover { color: green }
a:active { color: black }
#special:link { color: pink }
And now this markup:
Normal link
Special link
I expect the "special" link to be pink while keeping the other colors. However, pink replaces the other colors.
Why is this happening? How could I fix it? Thank you.
Its aggravating...and order matters here:
a:hover{
color:green;
}
a:visited{
color:red;
}
This means that unvisited links will turn green when you hover over them, and visited links will stay red when you hover on them.
Switch:
a:visited{
color:red;
}
a:hover{
color:green;
}
This means that both visited links and unvisited links will turn green when you hover on them. I hate that the order of these properties changes the behavior; the hover style should take effect regardless.
a:link{
color:blue;
}
a.one:hover{
color:green;
}
a.one:visited{
color:red;
}
a.two:visited{
color:red;
}
a.two:hover{
color:green;
}
<a href=#ddd class=one>One (wont change color on hover when visited)</a> |
<a href=#ddd class=two>Two (always turns green on hover)</a>
I believe it has to do with CSS priority order.
Because #special is an ID, it dwarfs any element-level style applied. (This can be proven in Firefox Firebug/Chrome Inspector and how the inherited style sheets are all over-written by the ID's style).
Though, considering there is no "present style" applied for :active, :visited, etc. It would stand to reason these styles would still be un-affected. Yet, making the following change to your hover seems to kick it back in to gear:
a:hover { color: green !important; }
Why is this happening?
Styles for the :link pseudo-class apply to all links states, so it includes :hover, :visited and :active
This is what I have observed since I started using CSS years ago. I don't know if it's how it is supposed to work but it is how I have seen it working and expect it to work.
So when, you set a style for #special:link, that style also applies to #special:hover, #special:visited and #special:active
Note that the use of an ID does not change much here.
If you try it with the below CSS, you will have both links pink... even for :hover state
a:link { color: blue }
a:visited { color: red }
a:hover { color: green }
a:active { color: black }
a:link { color: pink }
How could I fix it?
You can use !important as suggested by Brad or set the various states styles for #special together with the regular links.
a:link { color: blue }
#special:link { color: pink }
a:visited, #special:visited { color: red }
a:hover, #special:hover { color: green }
a:active, #special:active { color: black }
Here is another quick way around:
You can use :not(:hover).
#special:link:not(:hover) { color: pink }
DEMO
No, it is not going to use the other colors because of its ID, in such case you should add the rest of actions and colors to the ID.
For example, the link that you have, the "special" one, when over will say.
Ok, I'm 'a' ... link ... and my ID is .. special, so, I will keep the special parameters.
That's why that's not going to change.
Hope this helps,