label { position: absolute; left: 10px; } #LABEL_16 { top: 25px; 
 <input type="text" name="phone" id="INPUT_15" /> <label for="modal_phone" > Телефон <span>*</span> </label> <br> <input type="text" name="phone" id="INPUT_15" /> <label for="modal_phone" id="LABEL_16"> Телефон <span>*</span> </label>

How to make that when you click on the label field disappeared. And if you click on the next input, then the previous label should appear if the text was not entered. The same should happen when clicking outside the input (label appears if there are no values)

    2 answers 2

    Example

     * { padding: 0; margin: 0; box-sizing: border-box; } body { padding: 1em; } .form-item { display: inline-block; vertical-align: top; position: relative; width: 100%; } .form-item input { width: 100%; height: 50px; padding: 5px 15px; } .form-item label { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); } .form-item label>span { color: #f00; } .form-item input:valid+label, .form-item input:focus+label { opacity: 0; } 
     <div class="form-item"> <input type="tel" id="phone" required> <label for="phone">Телефон <span>*</span></label> </div>

      Inside input add placeholder = "Your text inside input field"

      Here is an example:

       <input type="text" name="phone" id="INPUT_15" placeholder="Введите ваш номер" />

      When you click the text will remain but when you enter text, it will go away.

      • label text is needed for styling. In the placeholder this is not - Vlad467