jQuery更改佔位符文本顏色

是否可以使用「:: - webkit-input-placeholder」與jQuery來設置佔位符文本的顏色？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 – 2013-02-19 20:59:31

很高興看到這個：https：//stackoverflow.com/a/20886968/1830909 – QMaster 2018-03-05 23:50:31

你真的不能修改僞選擇使用JavaScript。您必須修改現有的<style> element。

如果可能的話，做一個類：

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

，並將其添加到元素：

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

來源

2013-02-19 21:00:08 Blender

我相信大部分時間的樣式佔位符文本與jQuery的點將是動態的顏色。 – BenRacicot 2015-02-10 20:39:32

我用MaterializeCSS;我用jQuery來更新這樣

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

見結果輸入字段CSS：

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更改佔位符文本顏色

回答

相關問題