如何爲單個文本字段設置樣式的佔位符文本顏色？

我想爲每個文本字段使用不同顏色的佔位符文本樣式。如何爲單個文本字段設置樣式的佔位符文本顏色？

下面的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

如何爲單個文本字段設置樣式的佔位符文本顏色？

回答

相關問題