发表新帖
发表新帖

jQuery change placeholder text color

前端 未结
关注
5 950
甜味超标
甜味超标 2020-12-05 23:35

Is it possible to use \"::-webkit-input-placeholder\" with jQuery to set a color for the placeholder text?

Something like this:

$(\"input::-webkit-in
相关标签:
5条回答
  • 感动是毒
    2020-12-05 23:49

    I was using MaterializeCSS; I used Jquery to update CSS for input fields like this

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

    See Result:

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

    0 讨论(0)
  • 后悔当初
    2020-12-05 23:53

    Here is an example of dynamically setting pseudo-element styles using jQuery – it's a matter of creating a <style> element, setting its text content to the desired style declarations, and appending it to the document.

    Here is a simple single-page example:

    <!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>
    0 讨论(0)
  • 轮回少年
    2020-12-05 23:54

    You can't really modify pseudo-selectors with JavaScript. You'll have to modify an existing a <style> element.

    If possible, make a class:

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

    And add it to the element:

     $('input').addClass('your-class');
    0 讨论(0)
  • 一整个雨季
    2020-12-06 00:06

    Just add this. It will inherit the color in input[type=text]:focus new color

    .your-class ::placeholder{ color: inherit;}
    0 讨论(0)
  • 心在旅途
    2020-12-06 00:11

    If you don't have a stylesheet, and want to inject CSS dynamically you can use the following: 

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

    Just use my_class and the color for the placeholder.

    It's handy to have a general purpose function: 

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

    Usage: 

    change_placeholder_color('.my_input', 'red')
    0 讨论(0)
 看不清?
提交回复
热议问题