Multicolored placeholder text

Question

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?

Answer 1

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.

Answer 2

I have a rather fun way to do this and seems to work great in all browsers.

(Works fine in IE 8+, chrome, and Firefox.)

What I am doing is using the spans I put inside of the label to act as the value text.

Here is the html structure,

<label><span class="title">Name<span class="symbol">*</span></span>
    <input type="text" />
</label>

The css,

label {
    position: relative;
}

label:hover span {
    display: none;
}

input[type="text"]:focus, input[type="text"]:active {
    z-index: 2;
}

label input[type="text"] {
    position: relative;
}

.title {
    color: gray;
    position: absolute;
    left: 5px;
    top: 1px;
    z-index: 1;
}

.symbol {
    color: red;
}

Last here is the jQuery I wrote to not allow the span to hover over your input if the input is filled in.

$('input[type="text"]').blur(function() {
    if( $(this).val().length >= 1) {
        $(this).toggleClass('active');
    }
    else {
        $(this).removeClass('active');
    }
});

Here is a JSFIDDLE to play with.