jQuery change placeholder text color

Можно ли использовать «:: - webkit-input-placeholder» с jQuery, чтобы установить цвет для текста заполнителя?jQuery change placeholder text color

Что-то вроде этого:

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

источник

2013-02-19 Benny

Посмотрите на это: http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with -css –

Приятно взглянуть на это: https://stackoverflow.com/a/20886968/1830909 – QMaster

Вы не можете изменить псевдо-селекторы с помощью JavaScript. Вам придется изменить существующий файл <style> element.

Если это возможно, сделать класс:

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

И добавить к элементу:

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

источник

2013-02-19 21:00:08 Blender

Я считаю, что в большинстве случаев смысл оформления текста заполнителя с помощью jQuery будет динамическим. – BenRacicot

Я использовал 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

источник

2017-06-28 10:31:52

Вот пример динамической настройки стилей псевдо-элементов с помощью 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>

источник

2017-10-24 21:54:42

jQuery change placeholder text color

ответ

Смежные вопросы