there is

<input value="Введите E-mail: *" />

Is it possible to paint a star in red?
Or somehow it can be implemented differently?

    3 answers 3

    Part of the value of placeholder 'a (if you use it) cannot be colored. You can do this:

     $('#inputLbl, #input').click(function() { $('#inputLbl').removeClass('top'); }); $('#input').focusout(function() { if ($(this).val().trim() == '') { $('#inputLbl').addClass('top'); } }); 
     #input { width: 200px; } label { color: #aaa; } label sup { color: red; } label { position: relative; left: -200px; z-index: -10; } .top { z-index: 10; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="input" /> <label for="input" class="top" id="inputLbl">E-mail<sup>*</sup></label>

      To express the "mandatory" field to fill in, you can use: an asterisk in the label element next to input (for example,

        <label for="myInput">Введите e-mail <sup>*</sup></label><input type="text" name="" id="myInput">

      and for sup in css:

        label sup { color:red;}

      ) or change the color of the outline using the same css-properties for input'a (for example, the same red).

      • But the bottom line is that the text is in the input path. No other way. And it is removed when you click on the form. - Frontender

      It is the text of different colors that cannot be output to input , but you can do what you want.

      The variant with the styles and absolute positioning of the other element resulted above.

      Here is my solution to this problem:
      The essence of the idea : to use as a background image instead of text.

      ps It can be generated by php "on the fly".

       function removeBackground(x) { x.style.background = "white"; } function addBackground(x) { if (x.value === "") { x.style.background = "url(http://i.imgur.com/pCbyu2p.png) no-repeat 10px center"; } else { removeBackground(x); } } 
       #mail { background: url(http://i.imgur.com/pCbyu2p.png) no-repeat 10px center; height: 25px; width: 350px; } 
       <input id="mail" type="text" onfocus="removeBackground(this);" onblur="addBackground(this);" value="" />