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

问题描述：

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

I would like to style placeholder text in different color for each text field.

下面来自mozilla doc的代码将影响整个输入标签.

The code from mozilla doc below will affect entire input tag.

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

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

我希望每个文本字段具有不同的颜色.

I want to have different colors for each text field.

HTML

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

jQuery

我在下面尝试过，但是它只会将颜色设置为输入文本字段本身，而不是占位符.

I tried below but it will just set the color to the input text field itself not to the placeholder.

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

我不确定我的选择器没有正确指定，尽管不确定如何正确设置.

I think my selector is not specified correctly though not sure how to set properly.

如何使用jQuery通过元素ID设置单个占位符的样式?

How do I style individual placeholder by element id using jQuery?

答

您是否尝试过... CSS类?

Have you tried... CSS classes by any chance?

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

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

相关推荐