SO fiddle

Test Fiddle mainly for SO Questions

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<form action="http://localhost/daikon2/index.php/projects/admin/newproject" method="post"><ul id="createproject">
<li id="proname" class="">
<label for='project_name'>Project Name</label>
<div><input type="text" name="project_name" value="" id="project_name" size="20"  /></div></li>

<li id="tothou" class="" >
<label for='total_hr'>Total hour</label>
<div><input type="text" name="total_hr" value="" id="total_hr" size="10"  /></div>
</li>
<li id="act" class=""><label for="active">Active</label><div><span>Yes<input type="radio" name="active" value="1" checked="checked" id="active" /></span><span>No<input type="radio" name="active" value="0"  /></span>

</div>
</li>
<li id="by" class""><label for='created_by'>By</label>
<div><select name="created_by">
<option value="admin">admin</option>
<option value="admin2">admin2</option>
</select></div>
</li><li id="noteli" class=""><label for='note'>Note</label>
<div><textarea name="note" cols="90" rows="12" id="note" ></textarea></div>
</li>
<li>
<input type="hidden" name="id" value="6" />

</li>
<li id="submitbtn"><input type="submit" name="submit" value="Create New Project"  /></li>
</ul>
</form>

CSS

.focused { background: #ffeeee; }

JavaScript

$(":input").focus(function() {
  $(this).closest("li").addClass("focused");
}).blur(function() {
  $(this).closest("li").removeClass("focused");
});