Question

如何在输入字段的占位符文本上应用text-shadow？

当我应用这个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;
}

...到这个HTML：

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

...然后应用了color和font，但未应用text-shadow。

请参阅jsFiddle example。

Answer 1

看起来阴影适用于Firefox，但不适用于Chrome，Safari或Opera。 IE8根本不渲染占位符。

你可以等几年让所有的浏览器更好地支持html5，或者你可以尝试使用这样的javascript :( Mootools代码，但是在jquery或其他任何东西中实现类似的东西并不难。）

/* 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');
            }
        }
    });
}

HTML5占位符文本上的text-shadow

1 个答案: