jQuery change placeholder text color

Question

Is it possible to use "::-webkit-input-placeholder" with jQuery to set a color for the placeholder text?

Something like this:

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

Answer 1

You can't really modify pseudo-selectors with JavaScript. You'll have to modify an existing a <style> element.

If possible, make a class:

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

And add it to the element:

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

Answer 2

If you don't have a stylesheet, and want to inject CSS dynamically you can use the following:

$('body').append('<style>.my_class::placeholder{color:red}</style>') 

Just use my_class and the color for the placeholder.

It's handy to have a general purpose function:

function change_placeholder_color(target_class, color_choice) {     $("body").append("<style>" + target_class + "::placeholder{color:" +  color_choice + "}</style>") } 

Usage:

change_placeholder_color('.my_input', 'red')