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