Placeholder Focus Not Working

The Placeholder color is red. The default text field value is #444. What I want, If i click the text field, the placeholder color will change. But the default color should not be

Solution 1:

Move the :focus before ::placeholder:

:focus::-webkit-input-placeholder //etc

http://jsfiddle.net/ca35A/1/

Solution 2:

You are setting the :focus on the placeholder but it should be on the input:

:focus::-webkit-input-placeholder {
    color:#F3797A;
}

:focus:-moz-placeholder { /* Firefox 18- */color:#F3797A;
}

:focus::-moz-placeholder {  /* Firefox 19+ */color:#F3797A;
}

:focus:-ms-input-placeholder {
    color:#F3797A;
}

Fiddle

Note that not all browser support this. IE for example hides the placeholder when you focus on the input.