title: Change text color on focus and have it remain that color after focus has left (onblur)
body: <p>A CSS and perhaps Javascript question.  I want alternate rows to have different colors, the default text to be grey in color.  However, once an input field has focus I want the new text to be black and then to stay black after the field no longer has focus.  Here is what I have done so far:</p>
  
  <pre><code>input {
     font-family:Verdana, Trebuchet MS;
     font-size:11px;
     vertical-align:top;
  }
  
  input:focus {
      color: black;
  }
  
  input.odd {
     color: #888;
     background:#FFFFB4;
  }
  
  input.even {
     color: #888;
     background:#FFD9C8;
  }
  </code></pre>
  
  <p>This code achieves my requirements of alternate rows to have different colors and the default text to be grey in color.  However, new text is grey, not black.  Then how do I get the new text to stay black.</p>
  
  <p><strong>UPDATED CSS</strong></p>
  
  <pre><code>input {
     font-family:Verdana, Trebuchet MS;
     font-size:11px;
     vertical-align:top;
  }
  
  input.odd {
     color: #888;
     background:#FFFFB4;
  }
  
  input.even {
     color: #888;
     background:#FFD9C8;
  }
  
  input.odd:focus, input.even:focus, input.odd.hasText, input.even.hasText {
      color: black;
  }
  </code></pre>
  
  <p><strong>NEW jQuery CODE</strong></p>
  
  <pre><code>$('input').focus(function() {
     $(this).addClass('hasText');
  });
  </code></pre>