Изменить стиль текста в атрибуте placeholder

@Askerio · Регистрация: 28.10.2013

Author24 — интернет-сервис помощи студентам

Уважаемые форумчане, столкнулся с следующей задачей:
Имеется элемент

HTML5

1	<input type="text" placeholder="Имя*"></input>

Существует ли какой либо способ, задать тексту в атрибуте placeholder определенные стили, например изменить цвет либо шрифт и т.д. В даном случае необходимо сделать красным только символ "*". По умолчанию, данный текст выводится в сером цвете.
Прошу не судить строго, я еще много чего не знаю и только осваиваю данною сферу деятельности. Если такой вопрос уже поднимался, то прошу прощения что я его не нашел...
Заранее спасибо!

@Lazy_Den · 19.02.2014, 13:51

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

CSS

::-webkit-input-placeholder { /* Chrome, Opera и т.д. */
    color: red;
}
:-moz-placeholder { /* Firefox 18- */
    color: red;
}
::-moz-placeholder {  /* Firefox 19+ */
    color: red;
}
:-ms-input-placeholder { /* IE 10 */
    color: red;
}

@Askerio · 19.02.2014, 13:57 **[ТС]**

На данный момент нашел следующее решение:
- Создаем див с необходим текстом:

HTML5

1	<div class="placeholder_text">Имя<span>*</span></div>

- Задаем ему необходимые стили отображения. К примеру:

CSS

1
2
3

font-family: "Myriad Pro";
    font-size: 17px;
    color: #828282;

- и соответственно:

CSS

1
2
3

.placeholder_text span{
    color: red;
}

- все это добро оборачиваем в

HTML5

1	<div class="input_in_form"></div>

к примеру
- далее с помощью JS убираем отображение данного текста при клике

Javascript

$(document).ready(function(){
            $('.input_in_form').click(function(){
                $('.placeholder_text').css({"display" : 'none'});
            });
        });

Но в данном решении, есть один минус, если пользователь передумает заполнят поле и оставит его пустым, то оно так и останется пустым...

@Lazy_Den · 19.02.2014, 14:01

При потере фокуса с поля, возвращайте свойство display у '.placeholder_text':

Javascript

1
2
3

$('input').blur(function(){
    $('.placeholder_text').css('display' , 'block');
});

	19.02.2014, 14:01