Цвет текста заполнителя в поле ввода

Question

У меня есть поле ввода, в котором есть заполнитель текста. Я хочу, чтобы одно слово было другого цвета, скажем, красное, как бы я поступил так? Стилизация диапазона и окружение слова диапазоном не сработало.

Например, на этом сайте я хочу, чтобы число во фразе «Поиск 649 радиосюжетов» было красным.

http://66.251.226.207/library

Answer 1

Я не могу сказать об одном слове, но если вы хотите стилизовать весь заполнитель, тогда прочитайте это. Поскольку WebKit пока поддерживает только заполнители, вы можете использовать для него следующее css rule :

input::-webkit-input-placeholder {
    color: red;
}

В других браузерах по мере развития поддержки атрибутов-заполнителей вам придется использовать другие правила. Для браузеров на базе Gecko вы можете посмотреть Mozilla bug 457801 , чтобы узнать, каким будет окончательное решение.

Answer 2

Как насчет наложения div на вход, который исчезает при нажатии на него (а затем направляет фокус на вход)? Таким образом, вы можете стилизовать фрагменты текста так, как вам хочется.

$('#myInputOverlayDiv').click(function() {
    $(this).hide();
    $('#myInputElement').focus();
})