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

时间:2012-02-17 03:19:32

标签: javascript jquery css html5 firefox

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

以下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设置单个占位符?

3 个答案:

答案 0 :(得分: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> 

答案 1 :(得分:2)

: - moz-placeholder是一个伪类。

伪类不是DOM的一部分,因此jQuery无法直接编辑任何有关它们的内容。

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

拿他的代码,然后使用它将类从绿色切换为红色:

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

答案 2 :(得分:0)

可以使用jQuery预先添加一个块:

--jars [path]aws-java-sdk-[version].jar,[path]hadoop-aws-[version].‌​‌​jar