0

It is possible to remove the extra Firefox-specific spacing from <button> tags. The only drawback is that the outline will be missing when you focus to the button on your keyboard.

I would very much like to make my buttons consistent across Chrome, IE8, Firefox. If I could use a CSS :hover, I could easily show the button as focused using the same style that removes that Firefox spacing and outline.

Is there any way to do this without JavaScript? I do not care if other browsers ignore the rule. In fact I would prefer a :-moz-focused if there is such a thing so I can be sure that it won't happen in the other browsers.

Also, if a Chrome style outer glow could be accomplished in Firefox, that would be twice as good.

Community
  • 1
  • 1
700 Software
  • 85,281
  • 83
  • 234
  • 341

2 Answers2

4

There is, in fact, a :focus selector. Is that not what you need?

a:hover, a:active, a:focus {
   border: 1px dotted #f00;
}

I've done this with pretty decent results, although it is possible with the right combination of clicks and tabs to wind up with more than one element highlighted (one active and another focused). Not likely to be an issue in normal use, though you might consider a visual distinction between hover/active and focus.

Also note that :focus is supported in IE8 and 9 but not earlier versions. (The chart on quirksmode.org seems to indicate that it doesn't work in 8, but testing shows otherwise.)

eaj
  • 2,576
  • 1
  • 20
  • 42
0

CSS has the :focus selector for this purpose, which works like :hover, but applies to the element that has focus. There doesn’t seem to be a Firefox-specific version.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270