如何为单个文本字段设置占位符文本颜色的样式? [英] How to style placeholder text color for individual text field?

问题描述

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

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> 

这篇关于如何为单个文本字段设置占位符文本颜色的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！