I have a list full of a imgs:
<ul>
<li><a href="#"><img src="test.png" /></a</li>
<li><a href="#"><img src="test.png" /></a</li>
<li><a href="#"><img src="test.png" /></a</li>
(...)
</ul>
When I click them in Firefox, there's dotted outline (who the heck invented that and why? so ugly!).
I want to get rid of them, but style "outlines" etc. doesn't seem to work, I've tried all of options below:
#ul li img:active {
-moz-outline-style: none;
-moz-focus-inner-border: 0;
outline: none;
outline-style: none;
}
#ul li img:focus {
-moz-outline-style: none;
-moz-focus-inner-border: 0;
outline: none;
outline-style: none;
}
#ul li img a:active {
-moz-outline-style: none;
-moz-focus-inner-border: 0;
outline: none;
outline-style: none;
}
#ul li img a:focus {
-moz-outline-style: none;
-moz-focus-inner-border: 0;
outline: none;
outline-style: none;
}
You need to apply the styles to the <a>
tag (your latter two CSS rules are wrong because you've put the <a>
tag inside <img>
.
This works for me:
a:active,
a:focus {
outline: none;
-moz-outline-style: none;
}
Or, for only inside the element with ID ul
(not the best name, by the way):
#ul a:active,
#ul a:focus {
outline: none;
-moz-outline-style: none;
}
a:active,
a:focus {
outline: none;
-moz-outline-style: none;
}
works for me in FF22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With