Is there a way to style placeholder text in different colors for each text field?
According to the Mozilla documentation, the code snippet provided will change the color of the entire input tag.
If you'd like to learn more, follow this link: https://developer.mozilla.org/en/CSS/%3a-moz-placeholder
<style type="text/css">
input:-moz-placeholder {
color: green;
}
</style>
However, you mentioned wanting different colors for each text field.
HTML Example
<input id="foo" type="text" placeholder="I'm green" />
<input id="foo2" type="text" placeholder="I'm red" />
Using jQuery
You attempted to change the color of the placeholder text using the following code, but it only affected the input field itself, not the placeholder text.
var elementId = "#foo2";
$(elementId + ":-moz-placeholder").css("color", "red");
It seems like the selector may not be correct. How can you style individual placeholders by element ID using jQuery?