tags:

views:

379

answers:

2

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?

+1  A: 

<input ... onfocus="this.blur();"/> will do the trick

or jQuery :

$("input").focus(function(){this.blur();});
najmeddine
+1  A: 

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 :-)

Nino