Как сделать такой label в качестве placeolder?

Question

[Jawell]

Здравствуйте, хотелось бы узнать как можно сделать такой input text ?

Т.е. как сделать так, чтобы когда был фокус на input, "PHONE NO" не стерось, и текст начал писаться на против этой надписи ?
Если можно, то пожалуйста код :)

Answer 1

[Stalker_RED]

<label for="">
  <span>Phone No.:</span>
  <input type="text">
</label>

label {
  position: relative;
}
label input {
  padding-left: 6em; /* в инпуте отступ слева */
}
label span {
  position: absolute; /* приподнимаем надпись над инпутом */
  left: 0;
  color: gray;
  pointer-events: none; /* делаем ее "прозрачной" для кликов */
}

https://jsfiddle.net/d6sv7gnn/

Comments

[Jawell]

Спасибо !