Простий приклад

Тут ми маємо три текстових поля, які використовують місцезаповнювачі.

Як ви можете бачити - нічого складного. Коли ви фокусуєтесь на якомусь з полів, то з’являється назва цього поля, певного роду нагадування користувачу, що саме він повинен вводити:

<div class="form-row">
  <input type="email" class="input-text" id="name2" placeholder="Your Email" />
  <label class="label-helper" for="name2">Your Email</label>
</div>

Нічого незвичайного у даному HTML фрагменті. Єдине, що виходить за рамки стандарту - тег <label>, який знаходиться після тегу <input>.

Тепер за допомогою СSS потрібно привести це в дію:

.form-row {
  position: relative;
}
.input-text {
  background-color: #fff;
  border: 1px solid #ccc;
  margin-bottom: 8px;
  padding: 8px 4px;
  position: relative;
  width: 100%;
  z-index: 3;
}
.label-helper {
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  transition: .2s bottom, .2s opacity;
  z-index: 1;
}

Тепер СSS, який обрабляє наші назви(.label-helper), так щоб вони показувались, при фокусуванні:

.input-text:focus + .label-helper,
.input-text:invalid + .label-helper {
  bottom: 95%; /* magic number, boo */
  font-family: arial;
  font-size: 14px;
  line-height: 1;
  opacity: 1;
  padding: 4px;
}
.input-text:invalid {
  border-left: 10px solid #f00;
}
.input-text:invalid + .label-helper:after {
  color: #f00;
  content: "X";
  font-family: arial;
  font-size: 14px;
  line-height: 1;
  padding-left: 12px;
}