CODEWITHSUNDEEP
cssfirefoxbuttonfocus
700 Software
700 Software

Reputation: 87783

Firefox: CSS: change style when button focused

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.

Upvotes: 0

Views: 6677

Answers (2)

eaj
eaj

Reputation: 2606

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

Upvotes: 4

Paul D. Waite
Paul D. Waite

Reputation: 98806

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.

Upvotes: 0

Related Questions