css change style of an element on click

Question

I have a list of elements, and i want to change a style of an element when one clicks on the list element(and that specific style to stay the same until the user presses another list item).

I tried using the 'active' style, but no success.

My code:

#product_types
{       
    background-color: #B0B0B0;
position: relative; /*overflow: hidden;*/
}


#product_types a:active
{
    background-color:yellow;
}

but the element is 'yellow' only a millisecond, while i actually click on it...

Answer 1

Use the :focus pseudo class

#product_types a:focus
{
 background-color:yellow;
}

See this example -> http://jsfiddle.net/7RASJ/

The focus pseudo class works on elements like form fields, links etc.