CSS Input field text color of inputted text

John picture John · Jul 12, 2011 · Viewed 352.9k times · Source

I have an input field, and the color of the text in it is black. (I'm using jquery.placeholder) Let's say the text in there is "E-Mail"

When you click on this field, the black placeholding text dissapears (thanks to jquery.placeholder).

Any text inputted into this field, I want it to turn red, and when you deselect this field, I want it to stay red.

At the moment, the text saying "E-Mail" is black, and anything I type into is red, which is great, but as soon as i deselect, it goes back to black. Can anyone help me? I want the text to stay red, even after it's deselected. Here is my code

textarea:focus, input:focus {
    color: #ff0000;
}

input, select, textarea{
    color: #000;
}

Answer

Jason Gennaro picture Jason Gennaro · Jul 12, 2011

Change your second style to this:

input, select, textarea{
    color: #ff0000;
}

At the moment, you are telling the form to change the text to black once the focus is off. The above remedies that.

Also, it is a good idea to place the normal state styles ahead of the :focus and :hover styles in your stylesheet. That helps prevent this problem. So

input, select, textarea{
    color: #ff0000;
}

textarea:focus, input:focus {
    color: #ff0000;
}