jQueryのプレースホルダテキストの色を変更する

jQueryで ":: webkit-input-placeholder"を使用して、プレースホルダテキストの色を設定することはできますか？このようなjQueryのプレースホルダテキストの色を変更する

何か：

$("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を使用していました。 - それは作成の問題です

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

出典

2017-06-28 10:31:52

ここで動的にjQueryを使って擬似要素のスタイルを設定する例を示します。この

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

参照結果は以下のように私は、入力フィールドのためのCSSを更新するための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のプレースホルダテキストの色を変更する

答えて

関連する問題