Color of placeholder text in an input field

Question

I have an input field which has a placeholder text. I want one word to be a different color say red, how would would I go about that? Styling a span and surrounding the word with the span didn't work.

For example on this site, I want to the number in the phrase "Search 649 radio stories" to be red.

http://66.251.226.207/library

Answer 1

I can't tell about a single word, but if you were to style the whole placeholder, then read this.

Since placeholders are only supported by WebKit so far, you can use the following css rule for it:

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

For other browsers, as support for placeholder attribute evolves, you'll have to use different rules. For Gecko-based browsers you may want to watch Mozilla's bug 457801 to find out what the final solution will be.

Answer 2

How about overlaying a div over the input that disappears when you click it (and then directs focus to the input)? That way you can style the portions of text however you want.

$('#myInputOverlayDiv').click(function() {
    $(this).hide();
    $('#myInputElement').focus();
})