2

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?

Zar
  • 6,786
  • 8
  • 54
  • 76
  • 1
    I'm not sure this is possible without appending to the head. This is basically the same as trying to change the `:hover` properties for a style. It's a pseudo class, and isn't directly modifyable by jQuery's `css` or Javascript's DOM API. You could look at http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript – Ian Dec 10 '12 at 17:59
  • Check this solution out: http://stackoverflow.com/questions/11394217/how-do-i-change-the-moz-placeholder-color-with-jquery-once-its-set – jValdron Dec 10 '12 at 18:00
  • @jValdron That's exactly what the OP said they want to **avoid** – Ian Dec 10 '12 at 18:00
  • @Ian I know, but it's probably one of the only solution that's out there, like you've pointed out. – jValdron Dec 10 '12 at 18:01
  • 2
    @jValdron True, but I'm guessing that's the question they already found and were referencing when they said they don't want to use. I never would've thought to use that technique unless I saw that question, but I guess that's just me – Ian Dec 10 '12 at 18:02
  • You guys are absolutely right. Adding style to the document dynamically is both messy and harder to manage (especially together with JQM). – Zar Dec 10 '12 at 18:07
  • What about inserting the style element right after the input? When the parent is removed, so is the style element. – pimvdb Dec 11 '12 at 20:00
  • @pimvdb I'm no expert; but I think that would make my website unable to validate it's source (context: W3C-validator? – Zar Dec 11 '12 at 21:10
  • @Zar: Yes, I guess it would. But if it's impossible to achieve it otherwise, I think valid HTML is of less priority. – pimvdb Dec 11 '12 at 21:15

1 Answers1

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

tiffon
  • 5,040
  • 25
  • 34