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"});

Solution 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');

Solution 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')

Solution 3

Just add this. It will inherit the color in input[type=text]:focus new color

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

Comments

[Rickard Andersson]

Have a look at this: stackoverflow.com/questions/2610497/…

[QMaster]

Nice to look at this: stackoverflow.com/a/20886968/1830909

[Ben Racicot]

I believe most of the time the point of styling placeholder text with jQuery would be dynamic colors.

[Ayyoub]

the person instructed that he is looking to change the placeholder styling not the regular text,