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

我想为每个文本字段使用不同颜色的占位符文本样式。如何为单个文本字段设置样式的占位符文本颜色？

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

来源

2012-02-17 masato-san

你有没有尝试过... 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>

来源

2012-02-17 04:01:05 mowwwalker

当然，我觉得我没” t清除，但我想知道如何设置它使用jQuery的css（） – 2012-02-17 04:06:21

我可以想到的一种方式是添加类与您的建议相结合。 $（elementId）.addClass（ “绿色”）; – 2012-02-17 04:14:55

：-moz-placeholder是一个伪类。

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

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

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

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

来源

2012-02-17 05:43:29 sngregory

不，它是一个伪_class_（如'：visited'）。 WebKit的':: - webkit-input-placeholder'是一个伪元素（比如':: before'）。只需计算双冒号的数量。 :) – fuxia 2012-02-17 06:04:55

感谢您的澄清，我编辑我的答案纠正错误。 – sngregory 2012-02-18 08:02:39

这是可能的，在前面加上块使用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);

来源

2017-02-10 09:18:03

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

回答

相关问题