javascript – How to insert * red in placeholder?


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

To make the * sign red?


.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 class="placeinput">
    <input required="1" type="text" id="text" />
    <div class="place_holder">другой текст text<span>*</span></div>

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

Scroll to Top