Исчезающая подсказка в <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=" "><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" />