Как в placeholder вставить * красного цвета?

#javascript #html #css #input #placeholder

Чтобы знак * был красного цвета?
    

Ответы

Ответ 1

http://jsfiddle.net/oceog/WddQ8/1/



.place_holder {
    z-index: 100;    
    left: 10px;
    cursor: text;   
    position: absolute;
    top: 1px;
    left: 5px;
    width: 100%;    
    display: none;
    color: lightgrey;
}

.placeinput input:invalid + .place_holder {
     display: inline;
}

/*вся проблема в том, если placeholder больше инпута*/
.placeinput {
    position: relative;
    overflow: hidden;
}
.place_holder span {
    color: red;
}

    
    
Some text*



    
    
другой текст text*





вот ещё вариант правда с поддержкой браузеров я не уверен, оно даже через  запятую
не стало работать (по факту, только в chrome работает).

вот вариант про который я говорил в самом начале


Ответ 2

приблизительно так

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}


http://jsfiddle.net/WddQ8/



$('#text').focus(function () {
    $('#hint').hide();
});

$('#text').blur(function () {
    if ($(this).val().trim() === '') {
        $('#hint').show();
    }
});
input {
    width: 200px;
}
label {
    z-index: 100;
    position: relative;
    left: -200px;
    cursor: text;
}


Some text*





Посмотрите 

Можно ли в инпуте вывести текст разного цвета?


Ответ 3

Посмотреть пример:
Разметка


    
    Some text*


Стили

.holder {
    height: 26px;
    position: relative;
}
.holder input, .holder label {
    position: absolute;
    top: 0;
}
.holder input {
    background: rgba(0, 0, 0, 0);
    height: 20px;
    padding-left: 3px;
}
.holder input:focus {
    background: #ffffff;
}
.holder label {
    height: 26px;
    left: 5px;
    line-height: 26px;
    z-index: -1;
}
.holder label > span {
    color: #ff0000;
}