Change Unordered list item's color on focus?

How can we change an unordered list's item color when it is focused with tab or clic开发者_开发问答ked with mouse using CSS ?

Edit: Check JSFiddle

   .form li input:focus
{
    background-color:yellow;
}

Check that...

If your interested, this jQuery may work, please someone step in and correct it if its wrong!

$(".form li input").click(function(){
        $(this).closest("li").css("background-color","yellow");
});

$(".form li input").blur(function(){
        $(this).closest("li").css("background-color","white");
});

I don't know if it is possible with focussed list-items, because I guess it's not intended to be focussed. One thing you could do is to change the color on mouseover:

li:hover { color: #F00; background-color: #0F0; }

IF so try to use glowing tab .. which is newest and fastest technique to change hover tab.. IT will take position as argument. on hover event.

Here is your pure CSS solution http://jsfiddle.net/Starx/a93Rb/, only compatible with FF for now. You can make it compatible for the remaining browsers.

$( document ).ready(function()
{
// catch a click on any of the <li> items
$('li').click(function(){
// store a reference to the specific <li> that
// was clicked.
var $li = $(this);

// toggle the class (if it's applied, it's removed.
// if it's removed, re-apply it)
$li.toggleClass('highlight');

// Remove below code so that on click the highlight will be fixed
// Now, if it's applied, remove the class from any
// other <li> (single item clicked at a time)
if ($li.hasClass('highlight')){
    $li.siblings().removeClass('highlight');
}
});
});