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.

Answer 2

The reason it doesn't work in other browsers is related to the css focus specification. It states:

The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).

So it seems to work perfectly fine with text input fields or when you focus using the tab key. To make the above compatible with other browsers add the tabindex attribute to each element and this appears to fix the problem.

HTML:

<ul>
    <li id = 'product_types'><a href='#' tabindex="1">First</a></li>
    <li id = 'product_types'><a href='#' tabindex="2">Second</a></li>
</ul>

CSS:

#product_types  {
    background-color: #B0B0B0;
    position: relative;
}

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

JSFiddle Example