jQuery更改占位符文本颜色

是否可以使用“:: – webkit-input-placeholder”和jQuery为占位符文本设置颜色？

像这样的东西：

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

Answer 1

您无法使用JavaScript真正修改伪选择器。 您必须修改现有的

元素 。

如果可能的话，上课：

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

并将其添加到元素：

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

Answer 2

我在使用MaterialiseCSS; 我使用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

Answer 3

下面是使用jQuery动态设置伪元素样式的示例 – 它是创建

元素，将其文本内容设置为所需的样式声明，并将其附加到文档的问题。

这是一个简单的单页示例：

Answer 4

如果您没有样式表 ，并且想要动态注入CSS，则可以使用以下命令：

 $('body').append('') 

只需使用my_class和占位符的颜色即可 。

具有通用function很方便：

 function change_placeholder_color(target_class, color_choice) { $("body").append("") } 

用法 ：

 change_placeholder_color('.my_input', 'red') 

Answer 5

只需添加这个。 它将inheritance输入[type = text]中的颜色：聚焦新颜色

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