Question

I would like to style placeholder text in different color for each text field.

The code from mozilla doc below will affect entire input tag.

https://developer.mozilla.org/en/CSS/%3a-moz-placeholder

<style type="text/css">  
    input:-moz-placeholder {  
      color: green;  
    }  
</style> 

I want to have different colors for each text field.

HTML

<input id="foo" type="text" placeholder="im green" />
<input id="foo2" type="text" placeholder="im red />

jQuery

I tried below but it will just set the color to the input text field itself not to the placeholder.

var elementId = "#foo2";
$(elementId + ":-moz-placeholder").css("color", "red");

I think my selector is not specified correctly though not sure how to set properly.

How do I style individual placeholder by element id using jQuery?

Answer 1

Have you tried… CSS classes by any chance?

<input class="green" id="foo" type="text" placeholder="im green" />
<input class="red" id="foo2" type="text" placeholder="im red />

<style type="text/css">  
    input.green:-moz-placeholder {  
      color: green;  
    }  
</style>