Javascript 如何为单个文本字段设置占位符文本颜色的样式？

我想为每个文本字段设置不同颜色的占位符文本样式

下面mozilla文档中的代码将影响整个输入标记

我认为我的选择器没有正确指定，但不确定如何正确设置

---

如何使用jQuery按元素id设置单个占位符的样式？

您是否尝试过。。。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> 

：-moz占位符是一个伪类

伪类不是DOM的一部分，所以jQuery不能直接编辑关于它们的任何内容

另一种方法是使用类来更改颜色，这是Walkereno建议的

获取他的代码，然后使用此代码将类从绿色切换到红色：

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

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

var$inlineStyleTemplate=$（“”+
" " +
.navigation md lg>li>a、.header right>ul>li>a、.header right.fa搜索{color:+menuColor+“}”+
svg{fill:+menuColor+“}”+
#搜索{边框颜色：+menuColor+“}”+
“#搜索：：-webkit输入占位符{color:+menuColor+“}”+
“#搜索：：-moz占位符{color:+menuColor+”}”+
#搜索搜索：-ms输入占位符{color:+menuColor+“}”+
#搜索搜索：-moz占位符{color:+menuColor+“}”+
""
);
$（'head'）.prepend（$inlineStyleTemplate）；
当然，我想我不太清楚，但我想知道如何使用jQuery css（）进行设置。我能想到的一种方法是结合您的建议添加类$（elementId）.addClass（“绿色”）；不，它是一个伪类（比如
：visted
）。WebKit的
：：-WebKit输入占位符
是一个伪元素（如
：：before
）。只需计算双冒号的数量。：）感谢您的澄清，我编辑了我的答案以更正错误。
<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> 

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

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