Multicolored placeholder text

css, html

Solution

Try something like this: http://jsfiddle.net/vmuJm/

The trick: address the placeholder text, add a "required" class to required inputs, and use the `:after` pseudo element to add an appropriately colored asterisk.

[EDIT] It looks like this is only working for Webkit browsers.

Problem

I need to create an HTML text input element that features multicolored placeholder text. All of the text should be gray except, but a closing asterisk should be red, as in: This strikes me as a seemingly simple task that is actually a lot more complicated because of how browsers restrict our ability to style native input elements. I have heard of people using CSS to override native input styles so they can use custom fonts, etc., but is there away to have two special text styles (gray and red)? Or do I need to use an alternative (non-native) input?

Original source