2
Contributors
2
Replies
34
Views
1 Year
Discussion Span
Last Post by gentlemedia
2
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/

Edited by gentlemedia: :focus example

2

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
}

Edited by gentlemedia

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.