input:focus isn't working on Firefox
Question
I have the following style which I've verified is being loaded:
input:focus { outline: none; }
:focus { outline: none; }
I did this to stop showing the dotted rectangle when I click on something. This works for everything in FireFox that I've noticed, except for my input buttons. My input buttons still show a dotted rectangle around them when I click them.
How can I get them to stop doing that?
Solution
I needed to do this (source):
/*for FireFox*/
input[type="submit"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
button::-moz-focus-inner { border : 0px; }
/*for IE8 */
input[type="submit"]:focus,
input[type="button"]:focus { outline : none; }
I already had "outline: 0" set on everything via a reset, but that -moz-focus-inner was needed to get rid of the dotted line on a CSS-styled button.
OTHER TIPS
<input ... onfocus="this.blur();"/>
will do the trick
or jQuery :
$("input").focus(function(){this.blur();});
This works for me (tried it in both firefox 2 and 3)
<html>
<head>
<title>Test</title>
<style>
:focus { -moz-outline-style: none;}
</style>
</head>
<body>
<form action="#">
<input type="image" src="button.png" />
</form>
</body>
</html>
Just add a button.png :-)
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow