gistfile1.txt

<apex:page standardController="Lead">
  <style>
    .fieldempty
    {
      background-color: yellow;
    }
    
    .fieldpopulated
    {
      background-color: white;
    }
  </style>
  
  <apex:includescript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" />
  
  <apex:form >
    <apex:pageBlock >
      <apex:pageBlockButtons >
        <apex:commandButton value="Save" action="{!save}" />
        <apex:commandButton value="Cancel" action="{!cancel}" />
      </apex:pageBlockButtons>
      
      <apex:pageBlockSection title="Details">
	    <apex:inputField id="flagEmptyFName" value="{!Lead.FirstName}" />
	    <apex:inputField id="flagEmptyEmail" value="{!Lead.Email}" />
  	    <apex:inputField value="{!Lead.LastName}" />
	    <apex:inputField value="{!Lead.Phone}" />
	    <apex:inputField value="{!Lead.Company}" />
      </apex:pageBlockSection>
      <apex:pageBlockSection title="Address">
	    <apex:inputField id="flagEmptyStreet" value="{!Lead.Street}" />
	    <apex:inputField value="{!Lead.State}" />
	    <apex:inputField id="flagEmptyCity" value="{!Lead.City}" />
	    <apex:inputField value="{!Lead.Country}" />
	    <apex:inputField id="flagEmptyZip" value="{!Lead.Postalcode}" />
	  </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>
  
  <script>
	  
    $(document).ready(function()
    {
    	flagEmpty('flagEmpty');
    	
		$("[id*='flagEmpty']").change( function(event) {
				flagEmpty($(event.target).attr('id'));
		});
    });
    
    function flagEmpty(theId)
    {
        $("[id*='" + theId + "']").each(function(index, ele) {
			if($(ele).val().length > 0)
			{
				$(ele).removeClass('fieldempty');
				$(ele).addClass('fieldpopulated');
			}
			else
			{
				$(ele).removeClass('fieldpopulated');
				$(ele).addClass('fieldempty');
			} 
		});
	}
	  
  </script>
</apex:page>