Разноцветный текст заполнителя

Мне нужно создать элемент ввода текста HTML, который содержит многоцветный текст заполнителя. Весь текст должен быть серым, за исключением, но замыкающая звездочка должна быть красного цвета, как в:Разноцветный текст заполнителя

enter image description here

Это поражает меня, как, казалось бы, простая задача, которая на самом деле является гораздо более сложным из-за того, как браузеры ограничивают наши способность создавать собственные элементы ввода.

Я слышал о том, что люди используют CSS для переопределения собственных стилей ввода, чтобы они могли использовать пользовательские шрифты и т. Д., Но есть ли у вас два специальных стиля текста (серый и красный)? Или мне нужно использовать альтернативный (не родной) вход?

источник

2013-12-18 hawkharris

Невозможно сделать это без огромного количества хлопот. (Вам придется использовать элемент 'span' и спрятать их динамически ... или, может быть, поставить звездочку в фоновое изображение, если вы можете жить с ней слева от слова) –

Пожалуйста, добавьте код, в противном случае это почти невозможно чтобы помочь – Don

Возможно, вы * можете * использовать небольшое jQuery для проверки элементов формы, ищущих значение (например, class = "required"), и, возможно, вы можете назначить свойства, добавить теги или что-то еще, чтобы сделать необходимые форматирование. Если вы готовы к небольшому трюку jQuery, чтобы справиться с этим, я мог бы попытаться разработать решение. –

Попробуйте что-то вроде этого: http://jsfiddle.net/vmuJm/

Хитрости: адрес замещающего текста, добавить «необходимый» класс необходимых ресурсов, и использовать элемент :after псевдо добавить соответствующий цвет звездочки.

[EDIT] Похоже, что это работает только для браузеров Webkit.

источник

2013-12-18 19:55:24 Palpatim

быть осторожным, потому что это не будет работать на большинстве IE, но это хорошее решение. – imbask

Спасибо, что указали, что нет - я не проверял совместимость с x-браузером, но OP должен иметь возможность кодировать что-то, что изящно деградирует. – Palpatim

Я нахожусь в Firefox 25.0.1 и не вижу звездочку вообще в jsfiddle. – mseifert

У меня есть довольно интересный способ сделать это и, кажется, отлично работает во всех браузерах.

(отлично работает в IE 8+, хром и Firefox.)

То, что я делаю, используя пролеты я вставил внутрь этикетки, чтобы действовать в качестве текста значения.

Вот HTML структура,

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

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; 
}

Последнее здесь является JQuery я написал, чтобы не допустить пролет парить над входом, если вход заполнен .

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

Это JSFIDDLE, чтобы играть.

источник

2013-12-18 20:17:54

Разноцветный текст заполнителя

ответ

Смежные вопросы