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

【问题标题】：How to style placeholder text color for individual text field?如何为单个文本字段设置占位符文本颜色的样式？
【发布时间】：2012-03-08 12:11:49
【问题描述】：

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

下面的 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 设置单个占位符的样式？

【问题讨论】：

标签： javascript jquery css html firefox

【解决方案1】：

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

【讨论】：

【解决方案2】：

:-moz-placeholder 是一个伪类。

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

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

拿他的代码，然后用它把类从绿色切换到红色：

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

【讨论】：

不，它是一个伪类（如:visited）。 WebKit 的::-webkit-input-placeholder 是一个伪元素（如::before）。只需计算双冒号的数量。 :)
感谢您的澄清，我编辑了我的答案以纠正错误。

【解决方案3】：

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

【讨论】：

当然，我想我并不清楚，但我想知道如何使用 jQuery css() 进行设置
我能想到的一种方法是结合您的建议添加课程。 $(elementId).addClass("green");