如何為單個文本字段設置占位符文本顏色？

Question

我想為每個文本字段設置不同顏色的占位符文本。

以下mozilla doc中的代碼將影響整個輸入標記。

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

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

我希望每個文本字段都有不同的顏色。

HTML

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

jQuery的

我試過下面但它只是將顏色設置為輸入文本字段本身而不是占位符。

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

我認為我的選擇器沒有正確指定，但不確定如何正確設置。

如何使用jQuery按元素id設置單個占位符？

Answer 1

你有沒有試過...... CSS課程？

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

Answer 2

：-moz-placeholder是一個偽類。

偽類不是DOM的一部分，因此jQuery無法直接編輯任何有關它們的內容。

另一種方法是使用類來改變顏色，這是Walkerneo建議的。

拿他的代碼，然后使用它將類從綠色切換為紅色：

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

Answer 3

可以在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);