web-dev-qa-db-fra.com

jQuery change la couleur du texte de l'espace réservé

Est-il possible d'utiliser ":: - webkit-input-placeholder" avec jQuery pour définir une couleur pour le texte d'espace réservé?

Quelque chose comme ça:

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

Vous ne pouvez pas vraiment modifier les pseudo-sélecteurs avec JavaScript. Vous devrez modifier un élément existant <style> .

Si possible, faites un cours:

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

Et ajoutez-le à l'élément:

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

Si vous n'avez pas de feuille de style et souhaitez injecter CSS de manière dynamique vous pouvez utiliser les éléments suivants: 

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

Utilisez simplement my_class et la color pour le paramètre fictif. 

C'est pratique d'avoir une fonction d'usage général: 

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

Utilisation : 

change_placeholder_color('.my_input', 'red')
0
Cybernetic

J'utilisais MaterializeCSS; J'ai utilisé Jquery pour mettre à jour CSS pour les champs de saisie comme celui-ci

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

Voir Résultat:

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

0
Hitesh Sahu

Ajoutez simplement ceci. Il héritera de la couleur en entrée [type = texte]: focus nouvelle couleur

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

Voici un exemple de définition dynamique de styles de pseudo-éléments à l'aide de jQuery. Il suffit de créer un élément <style>, de définir le contenu du texte dans les déclarations de style souhaitées et de l'ajouter au document.

Voici un exemple simple d'une page:

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