WIll CSS active work on a non-link element

Question

I want a items that have the tag class to be grayed (with a rounded border) when the mouse moves over and when the item(s) are clicked.

A sample item might look like this <span class="tag">Some value</span>

I was hoping this would give the desired result, (tag:hover works as hoped, but tag:active doesn't):

.tag{
    }

.tag:hover{
    background:#CCC;
    padding:4px;
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px;
    border-radius: 4px;     
}

.tag:active{
    background:#CCC;
    padding:4px;
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px;
    border-radius: 4px;         
    }

Answer 1

You can use jQuery to permanently add a class to your span. You could do it like this:

.tag:hover, .tag.everclicked{
background:#CCC;
padding:4px;
-webkit-border-radius: 4px; 
-moz-border-radius: 4px;
border-radius: 4px;         
}

And in jQuery:

$(document).ready(function()
{
    $('.tag').click(function()
    {
        $(this).addClass('everclicked');
    });
});

http://jsfiddle.net/r4gQQ/2/

Answer 2

You have the same CSS styles defined for both pseudo-classes. An :active element will usually have :hover too (depending on the browser), as it is applied whilst the mouse button is down on the element.

If you want the styles to stay applied when you've clicked and moved away from the element, you'll need to use JavaScript or, alternatively, give the element a tabindex attribute and use the :focus pseudo-class. Using @Marnix's test case, for example, http://jsfiddle.net/r4gQQ/1/.