3

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?

2
  • I tried this with FireFox 3.5, and it looks like the outline settings are drawn around the button. The button text has its own dotted outline. Correct me if I'm wrong: you're trying to control the button text outline via CSS. I don't believe that is possible. Sep 11, 2009 at 1:57
  • @David Thanks, that might be the answer then. I'm not actually using any text in the button (I'm using image instead), so I see a tiny little rectangle that's really annoying. I wish there was a way to get rid of it, but oh well.
    – Joseph
    Sep 11, 2009 at 2:47

3 Answers 3

4

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.

2

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

or jQuery :

$("input").focus(function(){this.blur();});
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.