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.

/%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?

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/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?

• javascript
• jquery
• css
• html
• firefox

Share Improve this question Follow edited Feb 17, 2012 at 4:07 Meow asked Feb 17, 2012 at 3:19 MeowMeow 19.2k5252 gold badges143143 silver badges183183 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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> 

:-moz-placeholder is a pseudo class.

Pseudo classes are not part of the DOM, so jQuery can not directly edit anything about them.

An alternate approach would be to use classes to change colors, which is what Walkerneo suggested.

Take his code, and then use this to switch the class from green to red:

    $("input#foo").toggleClass('red').toggleClass('green');

It's possible to prepend a block with jQuery:

    var $inlineStyleTemplate = $("" +
            "<style id='custom-menu-color'> " +
                ".navigation-md-lg > li > a, .header-right > ul > li > a,.header-right .fa-search {color: " + menuColor + "}" +
                "svg {fill: " + menuColor + "}" +
                "#search-search {border-color: " + menuColor + "}" +
                "#search-search::-webkit-input-placeholder { color: " + menuColor + "}" +
                "#search-search::-moz-placeholder { color: " + menuColor + "}" +
                "#search-search:-ms-input-placeholder { color: " + menuColor + "}" +
                "#search-search:-moz-placeholder { color: " + menuColor + "}" +
            "</style>"
        );

    $('head').prepend($inlineStyleTemplate);