Menu
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"}); 
965
<input type="text" placeholder="A red placeholder text..">
The “placeholder” property is used to get or set the placeholder of an input text. This can be used to change the placeholder text to a new one. The element is first selected using a jQuery selector. The new placeholder text can then be assigned to the element's placeholder property.
To change the text color with jQuery, use the jQuery css() method. The color css property is used to change text color.
Note: In most browsers, the appearance of placeholder text is a translucent or light gray color by default.
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'); 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') If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
