Question

I’m trying to style an input[type="button"] and it seems that when I click on the label IE (9 in my case; I don’t care for lower versions) doesn’t apply the :active style. Everything works beautifully on Chrome and Firefox and also in IE if I click outside of the label. I had no luck in finding any clues to what might be the problem.

A <button> doesn’t have this problem, so I guess there’s something special about the other button’s label, but what? And is there any workaround?

The problem is demonstrated at http://jsfiddle.net/Kmved/1/

Answer 1

Interesting find there. To answer the first question, “why?”: unfortunately, the CSS spec leaves the semantics of :active entirely up to the browser vendor:

CSS does not define which elements may be in the above states, or how
the states are entered and left. Scripting may change whether elements
react to user events or not, and different devices and UAs may have
different ways of pointing to, or activating elements.

Now I would consider this a bug in IE (and expect it to be fixed in IE10 perhaps), but the letter of the law says that this is perfectly acceptable and tough luck to you.

To answer the second question (workaround?): well, you said it yourself. Use a <button> instead; as a bonus you get the option of placing any type of content inside the button in addition to simple text.