Question

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:

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

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.

UPDATED CSS

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

NEW jQuery CODE

$('input').focus(function() {
   $(this).addClass('hasText');
});

Answer 1

Most likely you want

input.odd:focus,input.even:focus {
    color: black;
}

If you mean the text reverts to grey after it loses focus, you will probably need to add a class via javascript once text is entered and have that class match your focus class.

EDIT

Something like:

$('input').focus(function(){
    $(this).addClass('hasText');
});

Then in your CSS have:

input.even:focus,input.odd:focus,input.hasText{
    color: black;
}