On the code do not swear, hastily sketched. Actually, it is necessary that when the text is entered into the field, the placeholder is blocked and not returned to the input. help me please. https://jsfiddle.net/h7jmLuyz/

<div class="form-group"> <input type="text" class="form-control" name="name" id="inputName" required> <label for="inputName" class=" name-placeholder"><span class="placeholder">Имя</span></label> </div> <div class="form-group"> <input type="tel" class="form-control" name="phone" required> <label for="inputName" class=" phone-placeholder"><span class="placeholder">Телефон</span></label> </div>
  • and how do you want to check the number of characters entered in the field without js? - Vasily Barbashev
  • This all without js is done - Mr. Black
  • @Doofy will be very grateful if you help - DoneBass
  • @DoneBass I'll do it - Mr. Black
  • The @Doofy maximum that can be done is to check for validity with a pseudo-class :invalid . But this is all garbage in vegetable oil. And on :empty fields are not checked - Vasily Barbashev

1 answer 1

 body { margin: 32px; } label { position: relative; } .input { outline: none; background: rgba(0, 0, 0, 0); border: 1px solid #000; border-radius: 2px; width: 256px; height: 24px; padding: 4px 8px 4px 8px; font-family: Segoe UI; font-size: 16px; } .input + span:before { position: absolute; content: attr(name); left: 9px; top: -2px; font-family: Segoe UI; font-size: 16px; transition: .2s ease; } .input:valid + span:before { margin-top: -32px; transition: .2s ease; color: rgba(0, 0, 0, 0); } 
 <label><input class='input' type='text' required><span name='Имя'></span></label>

  • If I understand correctly, you need to hide the placeholder when the field is filled. As for styles, it is better to always do without JS - Mr. Black
  • You helped me a lot, redid a little your code for yourself. It was necessary that he did not hide and was fixed above the input. - DoneBass