Style Placeholder Font

I have no idea what I’m doing, but this successfully changed the font color of the name, email and subject placeholder-text:

input::-webkit-input-placeholder {
color: red !important;
}

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

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

input:-ms-input-placeholder {
color: red !important;
}

And this did the same to the text in the “message” field:

textarea::-webkit-input-placeholder {
color: red !important;
}

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

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

textarea:-ms-input-placeholder {
color: red !important;
}

Greetings,

If you will use the code from above and you want to have the same color as in the input value, you need to add opacity:1 to the snippet you pasted here.

You can shorten your CSS rules and complete it with the opacity part. We created this snippet for you:

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: red !important;
	opacity: 1;
}

input:-moz-placeholder,
textarea:-moz-placeholder { /* Firefox 18- */
	color: red !important;
	opacity: 1;
}

input::-moz-placeholder,
textarea::-moz-placeholder  { /* Firefox 19+ */
	color: red !important;
	opacity: 1;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
	color: red !important;
	opacity: 1;
}

Every default placeholder will have different opacity styling so the color of the placeholder will be much lighter than the value of the input.

As a notice, currently our add-on does not offer support for placeholder styling, but it will be added in the near future.

If you enjoy our work, please feel free to give us a five star rating or consider donating.

Best Wishes,
Lehel