After having read all dotted border questions possible, and not having found an answer, I write my question below.
How do i remove the dotted border around the div when i click on a link inside it?
This image shows the word "photography", which has a dotted border when clicked on.
The basics behind this is just a dropdown, that appears when that section is clicked on, which works absolutely fine, i just cannot stand that border, does my nut in.
Any ideas?
That's the focus state. Try to add this:
a:focus {
outline: none;
}
Or if that element isn't a real link, but for example just an li, make that
li:focus {
outline: none;
}
You can use below css property.
a, a:hover, a:active, a:focus {
outline: 0;
}
Please read this article - https://css-tricks.com/removing-the-dotted-outline/ and http://www.outlinenone.com/ for more clarification
Related
I've menu with some links and when i'm clicking on them on mobile mode in chrome i see a blue background over my links.
I've tried outline:none on :hover ,:active & :focus on my links but its no luck.
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation a:active {
color: #e6ebf6;
outline: none;
}
It looks like you are selecting the text so that you can copy and paste it somewhere. Use:
user-select: none;
When someone is actually viewing this on a mobile, this blue styling would not show unless they held their finger down so as to select the text.
was my problem too!
you should remove the highlight from your links try this:
-webkit-tap-higlight-color: transparent;
it worked for me!
Issue: When you click our logo a black bar appears underneath it in both firefox and chrome. If you hold the click on the logo it'll stay.
Below is some of the code I have tried to remove the black bar on focus:
a:active, a:focus {
outline: none;
}
a {
outline: none;
}
:focus {
outline:none;
}
::-moz-focus-inner {
border:0;
}
a img {outline : none;}
img {border : 0;}
Can someone tell me what is causing the black bar?
The reason this is happening is because, on line 45 of screen.css, you have the rule saying "background-color: #000 !important;" which is affecting a.coa-link (Your rule is set to affect a:focus, a:active, amongst others. This is why it only occurs when you click/click-hold on the link [focussing on the element.])
If you add to line 35 of style.css:
#header a.coa-link { clear: both; /* YOUR EXISTING CODE */
background-color: transparent !important; /* NEW LINE OF CODE */ }
Then your issue will not occur anymore.
HTH
Try setting the background-color for .coa-link class, to rgb(43,66,114) which is the background-color set to your body element.
Ok so it is a very weird issue, but a workaround is to add a div around the image:
<a class="coa-link" href="/" title="Home">
<div>
<img src="/files/2012/07/AC-banner-white-test7.png" alt="">
</div>
</a>
It worked for me in the chrome inspector.
This is happening because you have focus styles implemented for <a> tags. The reason it's shown as a black bar is because the <a> that surrounds the logo image does not have display: block; in the CSS. If it did have display: block, the entire header would have a black background.
Another problem is that there is an !important tag in there. Booo.
You need to add the following style to fix the black bar in your logo link:
#header .coa-link a {
display: block;
}
#header .coa-link a:focus,
#header .coa-link a:active, {
background: transparent!important;
}
I would never ever suggest using the !important declaration in CSS, but as someone has already added it in, you need to override it. Ideally remove the !important tag that's shown in the attached image, and then you won't need it in the fix.
how can I remove light dashed border of the a tag on focus mode?
when you click a link, it becomes dashed.
I set tabindex:-1 , but it did not make sense.
I want to whether I can remove it?
do you mean something like:
a:active {
outline: none;
}
a:focus {
-moz-outline-style: none;
}
I've been trying to use a:hover pseduo class so that when you hover over the image, you get a border to appear so that it looks clickable.
However, when I do this the border appears below the image in the space below but I'm unsure why.
#overlay a:hover {
border: solid 2px #666;
}
As you can see the border is not around the image, it's below it.
Hope someone can help me with this problem.
Put the border on the image, not the anchor.
#overlay a:hover img {
If your image has position: relative or one of the crazy non-block alignments, then the enclosing link doesn't expand to surround it.
We need to see some HTML to be sure, but try to take alignment parameters off the image, and you should it working. If you made the <a> position: relative I think the link block would surround it.
Use Firebug to experiment with DOM object layouts.
Try this:
#overlay a:hover {
border: 2px solid #666;
}
I am using this CSS to remove dotted borders which appear when hyperlinks are clicked
a:active, a:focus, input {
outline: 0;
outline-style:none;
outline-width:0;
}
This is working fine, but doesn't work on input buttons which have background images.
It's not my place to question your design decisions, so here you go.
Just add this to any link's you want to remove the dotted line
onfocus="if(this.blur)this.blur()"
It isn't working fine. It is rendering it impossible to navigate the design without a mouse.
See http://24ways.org/2009/dont-lose-your-focus for a reasonable compromise.
You could add an onclick: blur(); so it keeps it tab-happy and doesn't ruin the design when clicked.
But for the record, this seems to work cross browser. The first part for IE, the second for FF:
input, input:active, input:focus{
outline: 0;
outline-style:none;
outline-width:0;
}
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: none;
}
You need classes to differentiate which links have dotted borders and which do not. Using the img selector won't be enough.
Style your input tags to not have dotted borders; you could even use a class for your input buttons if you have more than one style (Clear, Submit, Cancel, etc.)