javascript – How to insert * red in placeholder?

Question:

<input type="text" id="reviews_nm" class="input_field" placeholder="Ваше имя*" name="name">

To make the * sign red?

Answer:

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

<label class="placeinput">
    <input required="1" type="text" id="text" />
    <div class="place_holder">Some text<span>*</span></div>
</label>

<label class="placeinput">
    <input required="1" type="text" id="text" />
    <div class="place_holder">другой текст text<span>*</span></div>
</label>

here's another option though with browser support, I'm not sure, it didn't even work with a comma (in fact, it only works in chrome).

Here's the one I was talking about at the beginning

Post Views: 9