jQuery ändern, Platzhalter, text, Farbe

Ist es möglich, verwenden Sie "::-webkit-input-placeholder" mit jQuery, um eine Farbe für den Platzhalter-text?

Etwas wie dieses:

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

InformationsquelleAutor der Frage Benny | 2013-02-19

  1. 46

    Können Sie nicht wirklich ändern pseudo-Selektoren mit JavaScript. Sie müssen zum ändern einer vorhandenen <style> - element.

    Wenn möglich, machen Sie eine Klasse:

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

    Und fügen Sie dem element:

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

    InformationsquelleAutor der Antwort Blender

  2. 0

    War ich mit MaterializeCSS; verwendet ich Jquery zum aktualisieren von CSS für input-Felder wie diese

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

    Ergebnis Sehen:

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

    InformationsquelleAutor der Antwort Hitesh Sahu

  3. 0

    Hier ist ein Beispiel für dynamisch-Einstellung pseudo-element-styles die Verwendung von jQuery – es ist eine Frage der Erstellung einer <style> element, die Einstellung seiner text-Inhalt auf die gewünschte style-Deklarationen und anfügen an das Dokument.

    Hier ist eine einfache single-page-Beispiel:

    <!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>

    InformationsquelleAutor der Antwort Chris Stringer

  4. 0

    Wenn Sie nicht über ein stylesheetund wollen zu injizieren CSS dynamisch können Sie die folgenden verwenden: 

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

    Verwenden Sie einfach my_class und die Farbe für die Platzhalter.

    Ist es praktisch, eine Allgemeine Funktion: 

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

    Nutzung: 

    change_placeholder_color('.my_input', 'red')

    InformationsquelleAutor der Antwort Cybernetic

  5. 0

    Fügen Sie einfach diesen. Es erbt die Farbe in input[type=text]:focus neue Farbe

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

    InformationsquelleAutor der Antwort franku

Schreibe einen Kommentar