There is a text type field for the input element. Placeholder must be applied to this field. All anything, but there is still one condition. It is necessary to place a red star at the end of the text (a "required field for filling" type of footnote).

To do this, I use the pseudo-element ::after :

 #myy .t3::-webkit-input-placeholder::after { content: '*'; color: red; } #myy .t3:-moz-placeholder::after { content: '*'; color: red; } #myy .t3::-moz-placeholder::after { /* Firefox 19+ */ content: '*'; color: red; } #myy .t3:-ms-input-placeholder::after { content: '*'; color: red; }

In chrome works. But there is no Firefox. Maybe I'm doing something wrong?

    2 answers 2

    This is most likely due to the fact that :before and :after adds content to the content of the element, while input has no content.

    This is not a cross-browser solution.

    Your option:

    1. Works - Opera 29.0.1795.60 , Chrome Версия 43.0.2357.81 m
    2. Does not work - FF 38.0.5 , IE10 , IE9 , Safari

    Example 1

     $('#text').focus(function() { $('#redstar').hide(); }); $('#text').blur(function() { if ($(this).val().trim() === '') { $('#redstar').show(); } }); 
     input { width: 200px; } label { z-index: 100; position: relative; left: -200px; } 
     <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="redstar">Some text<span style="color: red">*</span></label>

    Example 2

     div { position: relative; display: inline-block; } div > input{ height: 30px; padding: 5px 15px; } div > label { position: absolute; left: 0.5em; top: 50%; margin-top: -0.5em; } div > input[type=text]:focus + label { display: none; } div > label > span { letter-spacing: -2px; color: #ccc; display: inline-block; vertical-align: middle; } .redstar { color: #f00; font-size: 18px; } 
     <div> <input id="nameid" type="text" /> <label for="nameid"> <span>Some text</span> <span class="redstar">*</span> </label> </div>

    • Bad way. At least pointer-events: none add. Going to the field is not necessarily a click. - Qwertiy ♦
    • And where I wrote that this is the best option? Write your alternative, which will be better than mine. - soledar10
    • I suggested adding another css-property to make it better;) - Qwertiy ♦
    • Thank you, I will use the option with the label 'om. - pkrymskaya

    If you use the script, it is not necessary to insert a red asterisk into the placeholder. This can be a normal line element displayed near the input path, which, due to absolute positioning, will be shifted and displayed at the right edge of the input path. The visualization is important, but not the fifth point gap.

    Another thing, if you want to show that this is a required field, then it is better to display a border of a certain color, checking the contents before sending. Validation simply put, no one forbids it. How not to prohibit and communicate with the customer or project designer to adjust the element in terms of usability.

    Labels are an interesting thing, but it takes a lot of space on small screens. Consider this.