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

Question

我希望能够为每个文本字段设置不同颜色的占位符文本样式。 来自Mozilla文档的代码将影响整个输入标签。

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样式化单个占位符？

- Meow

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> 

- mowwwalker

---

当然，我觉得我表达不够清楚，但是我想知道如何使用jQuery的css()方法来设置它。 - Meow

我能想到的一种方法是结合您的建议添加类。$(elementId).addClass("green"); - Meow

Answer 2

:-moz-placeholder是一个伪类。

伪类不属于DOM，因此jQuery无法直接编辑它们的任何内容。

另一种方法是使用类来改变颜色，这就是Walkerneo建议的方法。

使用他的代码，然后使用以下代码将类从绿色切换到红色：

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

- sngregory

---

不，它是一个伪类（像 :visited 一样）。WebKit 的 ::-webkit-input-placeholder 是一个伪元素（像 ::before 一样）。只需数双冒号的数量。 :) - fuxia

感谢澄清，我编辑了我的答案以纠正错误。 - sngregory

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

- Tom Franssen