jQuery更改占位符文本颜色答案

【问题标题】：jQuery change placeholder text colorjQuery更改占位符文本颜色
【发布时间】：2013-02-04 17:03:03
【问题描述】：

是否可以在 jQuery 中使用 "::-webkit-input-placeholder" 来设置占位符文本的颜色？

类似这样的：

$("input::-webkit-input-placeholder").css({"color" : "#b2cde0"});

【问题讨论】：

看看这个：stackoverflow.com/questions/2610497/…
很高兴看到这个：stackoverflow.com/a/20886968/1830909

标签： jquery input colors placeholder

【解决方案1】：

你不能真正用 JavaScript 修改伪选择器。您必须修改现有的 <style> element。

如果可能，创建一个类：

.your-class::-webkit-input-placeholder {
    color: #b2cde0
}

并将其添加到元素中：

 $('input').addClass('your-class');

【讨论】：

我相信大多数时候使用 jQuery 为占位符文本设置样式的重点是动态颜色。

【解决方案2】：

如果您没有样式表，并且想要动态地注入 CSS，您可以使用以下方法：

$('body').append('<style>.my_class::placeholder{color:red}</style>')

只需使用 my_class 和 color 作为占位符。

有一个通用功能很方便：

function change_placeholder_color(target_class, color_choice) {
    $("body").append("<style>" + target_class + "::placeholder{color:" +  color_choice + "}</style>")
}

用法：

change_placeholder_color('.my_input', 'red')

【讨论】：

【解决方案3】：

只需添加这个。它将继承 input[type=text]:focus new color 中的颜色

.your-class ::placeholder{ color: inherit;}

【讨论】：

【解决方案4】：

这是一个使用 jQuery 动态设置伪元素样式的示例——它是创建一个 <style> 元素，将其文本内容设置为所需的样式声明，并将其附加到文档中。

这是一个简单的单页示例：

<!doctype html>                                                                                                                                                                 
<html>
    <head>
        <title>Dynamic Pseudo-element Styles</title>
        <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
        <script> 
$(document).ready(function() {                      
    createStyles();
    $('#slider-font-size').on('change', createStyles);

    function createStyles() {
        // remove previous styles
        $('#ph-styles').remove();

        // create a new <style> element, set its ID
        var $style = $('<style>').attr('id', 'ph-styles');

        // get the value of the font-size control
        var fontSize = parseInt($('#slider-font-size').val(), 10);

        // create the style string: it's the text node
        // of our <style> element
        $style.text(
            '::placeholder { ' +
                'font-family: "Times New Roman", serif;' +
                'font-size: ' + fontSize + 'px;' +
            '}');

        // append it to the <head> of our document
        $style.appendTo('head');
    }   
});     
        </script>
    </head>      

    <body>       
        <form>
            <!-- uses the ::placeholder pseudo-element style in modern Chrome/Firefox -->   
            <input type="text" placeholder="Placeholder text..."><br>

            <!-- add a bit of dynamism: set the placeholder font size -->
            <input id="slider-font-size" type="range" min="10" max="24">
        </form>
    </body>      
</html>

【讨论】：

【解决方案5】：

我使用的是 MaterializeCSS；我使用 Jquery 为这样的输入字段更新 CSS

  $(".input-field").css("color", themeColor);
  $(".input-field>.material-icons").css("color", themeColor);
  $(".input-field>label").css("color", themeColor);

查看结果：

https://codepen.io/hiteshsahu/pen/EXoPRq?editors=1000

【讨论】：

该人指示他希望更改占位符样式而不是常规文本，