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

So that the * sign is red?

    3 answers 3

    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 version of the truth with the support of browsers I'm not sure, it did not even work through a comma (in fact, it works only in chrome).

    here's a variant about which I spoke at the very beginning

    • @eicto, I liked your decision, I learned something new from it. It is a pity that it is not supported by IE at all. - VenZell
    • here write IE> = 10 - zb '
    • @eicto, I checked in IE 10, the "placeholder" does not disappear when typing. It disappears only when re-setting the focus in the input with the text ... - VenZell
    • funny, it turns out that their invalid does not change when typing, well, you can combine with focus. - zb '

    something like this

     ::-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; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input type="text" id="text" /> <label for="text" id="hint">Some text<span style="color: red">*</span> </label>

    Take a look

    Is it possible to display text in different colors?

    • cursor: text; for the label and generally great - VenZell
    • But why is there js? - zb '
    • JavaScript, make div appear and disappear by focus and blur input events - soledar10
    • @ soledar10, a solution without a script is available. For the sake of interest, I sketched an example. - VenZell
    • in webkit (blink) it can :: after after placeholder :) - zb '20

    See an example:

    Markup

     <div class="holder"> <input type="text" /> <label>Some text<span>*</span></label> </div>

    Styles

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