Font color on blurred (not focussed) input

[Aeonix]

https://jsfiddle.net/cmvs815c/1/

Is there a way to make "Enter a tag...", red as well?

[gentlemedia]

input::-webkit-input-placeholder { color: red }
input::-moz-placeholder { color: red }
input::-ms-input-placeholder { color: red }

You can't combine them in a single CSS block... they have to be separate.
https://jsfiddle.net/gentlemedia/jz63Lkh3/7/

EDIT:
Now you can even play with :focus to fade the placeholder color to transparent for example

input::-webkit-input-placeholder {
    color: red;
    transition: .3s;
}

input::-moz-placeholder {
    color: red;
    transition: .3s;
}

input::-ms-input-placeholder {
    color: red;
    transition: .3s;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

input:focus::-ms-input-placeholder {
    color: transparent;
}

https://jsfiddle.net/gentlemedia/7g4h66pk/1/

[gentlemedia]

A little update on my previous post. It seems that we get in CSS4 a standard approach for this - :placeholder-shown - so we can ditch the vendor prefixes by then. But for now to cover as many browsers with the prefix ones, we need 5 versions:

::-webkit-input-placeholder { /* Safari, Chrome and Opera */
    color: red;
}

:-moz-placeholder { /* Firefox 18- */
    color: red;
}

::-moz-placeholder { /* Firefox 19+ */
    color: red;
}

:-ms-input-placeholder { /* IE 10+ */
    color: red
}

::-ms-input-placeholder { /* Edge */
    color: red
}

:placeholder-shown { /* W3C Standard in CSS4 */
    color: red
}