jQuery zmienić kolor symbolu zastępczego

Czy można użyć ":: - webkit-input-placeholder" z jQuery, aby ustawić kolor tekstu zastępczego?jQuery zmienić kolor symbolu zastępczego

coś takiego:

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

Źródło

2013-02-19 Benny

Wystarczy popatrzeć na to: http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with -css –

Miło byłoby na to spojrzeć: https://stackoverflow.com/a/20886968/1830909 – QMaster

Naprawdę nie można modyfikować pseudo-selektorów z JavaScript. Będziesz musiał zmodyfikować istniejący <style> element.

Jeśli to możliwe, zrobić klasę:

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

i dodać go do elementu:

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

Źródło

2013-02-19 21:00:08 Blender

Wierzę, że przez większość czasu punktem styku tekstu zastępczego z jQuery będą dynamiczne kolory. – BenRacicot

używałem MaterializeCSS; Kiedyś jQuery zaktualizować CSS dla pól wejściowych jak ten

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

See Wynik:

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

Źródło

2017-06-28 10:31:52

Tutaj jest przykładem dynamicznego ustawiania stylów pseudo-element przy użyciu jQuery - to kwestia tworząc <style> element, ustawiając treść tekstową na żądane deklaracje stylu i dołączając je do dokumentu.

Oto prosty przykład pojedynczej strony:

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

Źródło

2017-10-24 21:54:42

jQuery zmienić kolor symbolu zastępczego

Odpowiedz

Powiązane problemy