css ":active" with right click, inconsistencies with browser implementation

cross-browser, css, css-selectors, pseudo-class

Solution

Selectors 3 says `:active` is true when an element is being activated, and further defines activation via a pointing device such as a mouse to be when the primary button is pressed:

- The `:active` pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. On systems with more than one mouse button, `:active` applies only to the primary or primary activation button (typically the "left" mouse button), and any aliases thereof.

If a secondary click activates an element for the purposes of `:active` in a particular browser, then that browser is in violation of the spec (unless the browser claims only to implement CSS2.1, where this restriction is not set in stone, but that's not true for any of the browsers given).

Problem

I just noticed an inconsistency between the way browsers handle the css :active state of an element when it is right-clicked (contextmenu click) - Firefox: :active is not triggered - Chrome: :active is triggered momentarily, until mouseup occurs - Safari 5 & IE 10: :active is triggered and element remains :active until the contextmenu is closed Here's a quick jsfiddle to replicate this http://jsfiddle.net/annam/tqBqV/ ``` div { background: red; } div:active { background: green; } ``` Anyone knows which is the correct behaviour? I guess there is no way to standardize?

Original source