тень текста на HTML5-заполнителе - PullRequest
Новая
       3

тень текста на HTML5-заполнителе

2 голосов
/ 05 сентября 2011

Как я могу применить 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 .

1 Ответ

2 голосов
/ 05 сентября 2011

Похоже, что тени работают в 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');
            }
        }
    });
}
...