para - selectores css

css cambia el estilo de un elemento al hacer clic

Question

Tengo una lista de elementos, y quiero cambiar el estilo de un elemento cuando uno hace clic en el elemento de la lista (y ese estilo específico permanece igual hasta que el usuario presiona otro elemento de la lista).

Intenté usar el estilo ''activo'', pero no tuve éxito.

Mi código:

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


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

pero el elemento es ''amarillo'' solo un milisegundo, mientras que realmente hago clic en él ...

Answer 1

Use la pseudo clase: focus

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

Ver este ejemplo -> http://jsfiddle.net/7RASJ/

La pseudo clase de enfoque funciona en elementos como campos de formulario, enlaces, etc.

Answer 2

La razón por la que no funciona en otros navegadores está relacionada con la especificación de enfoque css. Afirma:

La pseudo-clase de enfoque se aplica mientras que un elemento tiene el foco (acepta eventos de teclado u otras formas de ingreso de texto).

Por lo tanto, parece funcionar perfectamente bien con los campos de entrada de texto o cuando se enfoca usando la tecla de tabulación. Para hacer que lo anterior sea compatible con otros navegadores, agregue el atributo tabindex a cada elemento y esto parece solucionar el problema.

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;   
}

Ejemplo JSFiddle