placeholder, ::placeholder и :placeholder-shown

Исчезающая подсказка в <input> и <textarea> HTML

Внутри пустого поля ввода <input> или <textarea>, то есть пока атрибут value пустой или отсутствует, показывается надпись приглушенного цвета из атрибута placeholder, которая пропадает при вводе первого символа. Она может быть образцом значения или кратким описанием ожидаемого формата. [whatwg.org]

<input placeholder="текст-подсказка">
<textarea placeholder="текст-подсказка"></textarea>

Стремясь уменьшить форму и сократить визуальный шум, дизайнеры тег <label> заменяют на атрибут placeholder, тем самым увеличивая нагрузку на кратковременную память. Людям с нарушенным зрением подсказку трудно прочитать. Лучше разместить <label> непосредственно над полем ввода. Пустое поле легче распознаётся как элемент, требующий заполнения. [uxdesign.cc]

Стилизация: изменить цвет placeholder CSS

Псевдоэлемент ::placeholder CSS определяет внешний вид подсказки из атрибута placeholder. Список поддерживаемых свойств ограничен тем же списком, что псевдоэлемент ::first-line [csswg.org] и на текущий день не включает плавный переход transition.

<style>
.raz::placeholder {
  color: red;
  opacity: 1; /* сделать обычным неполупрозрачным цветом в Firefox */ 
}
</style>

<input placeholder="текст-подсказка" class="raz">
<textarea placeholder="текст-подсказка" class="raz"></textarea>

Поменять стиль поля ввода с placeholder CSS

Селектор [placeholder] определяет внешний вид элементов, у которых задан атрибут placeholder.

<style>
[placeholder] {
  background: linear-gradient(to right top, bisque 50%, cornsilk 50%);
}
</style>

<input>
<textarea></textarea>
<input placeholder="текст-подсказка">
<textarea placeholder="текст-подсказка"></textarea>

Псевдокласс :placeholder-shown CSS определяет внешний вид поля, пока видна подсказка из атрибута placeholder.

<style>
.raz:placeholder-shown {
  background: linear-gradient(to right top, bisque 50%, cornsilk 50%);
}
</style>

<input placeholder="текст-подсказка" class="raz">
<textarea placeholder="текст-подсказка" class="raz"></textarea>

Подсказка пропадает при получении фокуса <input type="text | password | другие"> и <textarea></textarea>

<style>
.raz:focus::placeholder {
  opacity: 0;
}
</style>

<input placeholder="текст-подсказка" class="raz">
<textarea placeholder="текст-подсказка" class="raz"></textarea>

В конце длинного обрезанного подсказывающего текста поставить многоточие

<style>
.raz:placeholder-shown {
  text-overflow: ellipsis;
}
</style>

<input placeholder="Обязательно заполняется при наличии" class="raz">

<style>
.raz:placeholder-shown {
  text-overflow: "\01F4E7"; /* свойством text-overflow может быть любой символ, в том числе emoji */ 
}
</style>

<input type="email" class="raz6" placeholder="name@site.ru                        ">

Текст в плейсхолдер должен быть коротким, иначе он не имеет смысла, так как его никто не сможет увидеть.

Сделать смещающиеся или всплывающие <label> в <form>

<style>
.raz {
  position: relative;
}
.raz span {
  position: absolute;
  bottom: 0;
  left: 2px;
  opacity: .5;
  visibility: hidden;
  transition: .2s;
}
.raz input:placeholder-shown ~ span {
  visibility: visible;
}
.raz input:placeholder-shown:focus ~ span,
.raz input:not(:placeholder-shown) ~ span {
  bottom: 100%;
  opacity: 1;
  font-size: 80%;
  visibility: visible;
}
</style>

<label class="raz"><input type="email" placeholder="&nbsp;"><span>Email</span></label>

<style>
.raz {
  position: relative;
}
.raz span {
  position: absolute;
  bottom: 50%;
  left: 2px;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
.raz input:not(:placeholder-shown) ~ span {
  bottom: 100%;
  opacity: 1;
  visibility: visible;
}
</style>

<label class="raz"><input type="email" placeholder="Email"><span>Email</span></label>

Плавающие метки неоднородны с метками элементов других типов веб-формы. Их менее контрастный цвет хуже различим. [medium.com]

Эффект placeholder для <div>

Атрибут placeholder работает только для <input> и <textarea>, даже если у других тегов указан атрибут contenteditable. [whatwg.org]

<style>
.raz {
  height: 3em;
  border: 1px solid;
}
</style>

<div contentEditable placeholder="Можно ввести текст" class="raz"></div>

<style>
.raz {
  height: 3em;
  border: 1px solid;
}
.raz:empty:not(:focus)::before { /* хак: если div задать и placeholder, то и .raz:empty:not(:placeholder-shown)::before будет работать */ 
  content: attr(data-placeholder);
  opacity: .5;
}
</style>

<div contentEditable data-placeholder="Можно ввести текст" class="raz"></div>

Древний метод на память, изменяющий value JavaScript

<input
 onblur="this.value=(this.value=='')?this.title:this.value;"
 onfocus="this.value=(this.value==this.title)?'':this.value;"
 value="Email"
 title="Email"
/>