Is jQuery UI missing a state?

Question

The jQuery UI widgets seem to have inactive, active, and hover states, but lack a depressed (clicked-and-held) state. Is this an oversight? Just about every modern UI I can think of have a depressed state. Has anyone added such a state? If so, what pieces of code did you have to touch?

---

Edit: What I should have said is that hovering and clicked states look the same. There should be another state so you can see that you've clicked after hovering.

Answer 1

In HTML/CSS, the active state applies "while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it." (CSS 2.1 Section 5.11.3) In the case of buttons, that would be the depressed state.

I just assume that applies to jQuery UI as well.

Answer 2

Don't forget that in your CSS, you can combine the pseudo-selectors:

a:link {
    color: blue;
}
a:hover {
    color: green;
}
a:visited {
    color: purple;
}
a:active {
    /* link is active */
    color: red;
}
a:visited:hover {
    /* hovering on a visited link */
    color: pink;
}
a:active:hover {
    /* hovering on an active link */
    color: black;
}
a:visited:active:hover {
    color: fuchsia;
}

There's a definite difference between a:active and a:active:hover : a link can become active by tabbing to it using the keyboard. Though it's not 100% foolproof, the state of being active and hovered would suggest that the user has the link depressed. Altering the border style would give you the desired effect. The only bug in this is if the link becomes active and then the user hovers over it without clicking, it'll still go depressed.

Try this CSS to see what I mean:

a {
    padding: 5px 10px;
    background-color: gray;
    border-color: gray;
    border-style: outset;
}
a:active:hover {
    border-style: inset;
}

Answer 3

It looks to be on purpose. Notice in Themeroller there is a clickable: active state settings area, but it does not behave as the css active state. A quick grep of a jQuery UI 1.7 package shows no styling for :active. It kinda seems like they designed the ui state for visual cues to their widgets, leaving the :active to the developer to use.