https://jsfiddle.net/cmvs815c/1/
Is there a way to make "Enter a tag...", red as well?
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;
}
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
}
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.