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

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

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>