Стилизация формы, украшаем поле ввода (input)

В данном примере в поле ввода будет текс, типа placeholder (но не он, а имитация его), и при фокусировке на поле, этот placeholder подымается вверх, освобождая место для ввода текста.

Сам этот прием использует теги input и label, и основан на том что тег label скрывается под тегом input, и фон input делается прозрачным, чтоб видеть под ним текст label, а при входе в поле(input:focus), сама метка подымается выше, на рамку тега input

Данное украшательство выглятит более привлекательно чем input по умолчанию.

Код HTML

<div class="form">

<div class="form-item">
<input type="text" id="username" autocomplete="off" required value="">
<label for="username">Username</label>
</div>

</div>

Код CSS

*,
*:focus{outline: none}

.form{
  width: 500px;
  margin: 0 auto;
  margin-top: 150px;
  font-family: sans-serif;
  background: #fff
}
.form-item{
  position: relative;
  margin-bottom: 15px
}
.form-item input{
  display: block;
  width: 400px;
  height: 40px;
  background: transparent;
  border: solid 1px #ccc;
  transition: all .3s ease;
  padding: 0 15px
}
.form-item input:focus{
  border-color: blue
}
.form-item label{
  position: absolute;
  cursor: text;
  z-index: 2;
  top: 13px;
  left: 10px;
  font-size: 12px;
  font-weight: bold;
  background: #fff;
  padding: 0 10px;
  color: #999;
  transition: all .3s ease
}
.form-item input:focus + label,
.form-item input:valid + label{
  font-size: 11px;
  top: -5px
}
.form-item input:focus + label{
  color: blue
}

Примечание:

Для тех кто плого знаком с CSS

.form-item input:focus + label

в данном селекте «+» указывает что label должен находится в том же родителе что и input

Ошибочный пример:

<p class="form-item">

  <input type="text" value="">

  <span>

    <label>Username</label>

  </span>

<p>

тут метка и инпут у разных родителях, и стиль не сработает

Результат: