text-shadow on HTML5 placeholder text

How can I apply a text-shadow on the placeholder text of 开发者_运维百科my input field?

When I apply this CSS:

input[type='text']::-webkit-input-placeholder {
    color: green;
    font: 18px Arial;
    text-shadow: 2px 2px 2px #000000;
}
input[type='text']:-moz-placeholder {
    color: green;
    font: 18px Arial;
    text-shadow: 2px 2px 2px #000000;
}

...to this HTML:

<input type="text" placeholder="placeholder text"/>

...then the color and font are applied but not the text-shadow.

See jsFiddle example.

It looks like shadows work in Firefox, but not in Chrome, Safari or Opera. IE8 is not rendering the placeholders at all.

You could wait a couple of years for all the browsers to better support html5, or you could try something in javascript like this: (Mootools code, but its not hard to implement something similar in jquery or whatever.)

/* focus/blur for Element */
function applyToggleElement(item, msg) {
    var itm = item;
    if (typeof (item) == 'string')
        itm = $$(item);

    if (itm.value.trim().length == 0) {
        itm.value = msg;
        itm.addClass('placeholder');
    }

    itm['msg'] = msg;
    itm.addEvents({
        'focus': function () {
            if (this.value == this.msg) {
                this.value = '';
                this.removeClass('placeholder');
            }
        },
        'blur': function () {
            if (this.value.trim().length === 0) {
                this.value = this.msg;
                this.addClass('placeholder');
            }
        }
    });
}