Как стилизовать цвет текста заполнителя для отдельного текстового поля?

Question

Я хотел бы оформить текст-заполнитель разным цветом для каждого текстового поля.

Код из документа Mozilla, приведенного ниже, повлияет на весь тег ввода.

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?

Answer 1

Вы когда-нибудь пробовали ... 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> 

Answer 2

: - moz-placeholder является псевдоклассом.

Псевдоклассы не являются частью DOM, поэтому jQuery не может напрямую редактировать что-либо о них.

Альтернативным подходом было бы использование классов для изменения цвета, что и предлагал Уокернео.

Возьмите его код, а затем используйте его для переключения класса с зеленого на красный:

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

Answer 3

Можно предварительно добавить блок с помощью 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);