Question

For other browsers, simply setting #input-element { color: red; } is sufficient to also color an input’s placeholder text (<input type="text" placeholder="foo" />).

However, this is not the case on iOS; which requires the following instead (perhaps more appropriate, but still):

#input-element::-webkit-input-placeholder { color: red; }

Fine, that’s no problem. However, I’m trying to do this with jQuery, without much success. I’ve tried the following:

$("#input-element::-webkit-input-placeholder").css('color', 'red');
$("#input-element").css('::-webkit-input-placeholder', 'color: red'); // not according to .css documentation: I'm aware

However, none of these did any change. I’m trying to avoid appending ($(head).append("<style>.."); the style directly to the document.

How to change an input’s placeholder style-attributes trough jQuery – maintaining iOS compatibility?

Answer 1

Why not just toggle a CSS class?

CSS:

input[type=text]::-webkit-input-placeholder { color: red; }

.blue-pl::-webkit-input-placeholder {
    color: blue !important;
}

JavaScript:

$('#input-element').click(function(){$(this).addClass('blue-pl'); });

This worked on my iOS 6 iPhone.

jsFiddle demo