Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности стилизации текста placeholder-a, а также некоторые трюки, которые позволят сделать его более удобным и функциональным.
Итак, начнем с примера для тех, кто не знает, что такое placeholder.
html
<input type="text" placeholder="Оставьте сообщение здесь">
Стиль placeholder-a можно изменить с помощью такого набора css правил:
css
::-webkit-input-placeholder {color:#c0392b;}
::-moz-placeholder {color:#c0392b;}/* Firefox 19+ */
:-moz-placeholder {color:#c0392b;}/* Firefox 18- */
:-ms-input-placeholder {color:#c0392b;}
Выглядит страшновато, не правда ли? Дело в том, что этого до сих пор нет в стандартах. Каждый браузер по-своему реализовал поддержку стилизации placeholder-а.
В IE и старых firefox (до 18-го) placeholder считается псевдоклассом, а в новых firefox, webkit и blink — псевдоэлементом.
Смотрим, что получилось:
Нужно сказать, что поддерживаются не все возможные css свойства. Большинство современных браузеров позволяют изменить:
- font (и сопутствующие свойства)
- background (и сопутствующие свойства)
- color
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- text-indent
- text-overflow
- opacity
А если placeholder не вмещается?
Иногда поля для ввода текста сокращаются по ширине из-за особенностей лейаута, в частности на мобильных девайсах. В этом случае длинный текст placeholder-а будет некрасиво обрезан. Чтобы предотвратить это, вы можете использовать text-overflow: ellipsis. Такой синтаксис будет работать во всех новых браузерах.
css
input[placeholder] {text-overflow:ellipsis;}
input::-moz-placeholder {text-overflow:ellipsis;}
input:-moz-placeholder {text-overflow:ellipsis;}
input:-ms-input-placeholder {text-overflow:ellipsis;}
Как скрыть placeholder при фокусе?
Скрывание placeholder-а происходит по-разному.
- в некоторых браузерах при получении фокуса инпутом
- в других браузерах при наличии хотя бы одного введенного символа
Мне больше нравится первый вариант. Для того, чтобы задать такое поведение во всех браузерах, поддерживающих placeholder, определим следующие css правила:
css
:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder {color: transparent}
:focus:-moz-placeholder {color: transparent}
:focus:-ms-input-placeholder {color: transparent}
Скрываем placeholder красиво
Можно также добавить transition для появления и скрытия placeholder-a:
Вот сss:
css
/* плавное изменение прозрачности placeholder-а при фокусе */
.input1::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.input1::-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.input1:-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.input1:-ms-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.input1:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.input1:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.input1:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.input1:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
/* сдвиг placeholder-а вправо при фокусе*/
.input2::-webkit-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
.input2::-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
.input2:-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
.input2:-ms-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
.input2:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
.input2:focus::-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
.input2:focus:-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
.input2:focus:-ms-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
/* сдвиг placeholder-а вниз при фокусе*/
.input3::-webkit-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;}
.input3::-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;}
.input3:-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;}
.input3:-ms-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;}
.input3:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
.input3:focus::-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
.input3:focus:-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
.input3:focus:-ms-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
Надеюсь, вам это пригодится. Пишите замечания и предложения в комментариях.
PDF и версия для печати
Жаль что Опера до сих пор не стилизует плэйсхолдер
Опера и Хром на одном движке, соответственно поддержка стилизации одинакова.
К сожалению опера 12 (та, которая еще не на blink) все еще занимает широкую нишу. Но это дело времени
Хотел сказать — которая на presto?
Спасибо, статейка помогла…главная часть статьи это » :focus::-webkit-input-placeholder {color:transparent} »
Прошу заметить, что через запятую прописанные правила работать не будут.
Спасибо, действительно нужно каждое правило отдельно писать!
Спасибо, добрый человек!))) Очень помогло!
Всегда пожалуйста, Мария!
Спасибо, пригодилось )
Отличная статья, спасибо! Кстати я тут заметил что плавность не работает в других браузерах. Только в хроме. Ну да ладно. Главное что цвет и исчезание при фокусе работает везде.
Очень помогла статья (исчезание при фокусе). Спасибо.
В мозиле не работает «Скрываем placeholder красиво»
А как вставить красную звездочку, после надписи в placeholder пробовал добавлять вот так :focus::-webkit-input-placeholder:after {color: red; content:*;} но не работает
Думаю, что это невозможно.
placeholderсам по себе является псевдо-элементом и не может вместить в себе еще один псевдо-элементafterБлагодарю, очень занимательная вещь)
почему в валидаторе выдает предупреждение на этот код
:focus::-webkit-input-placeholder{color:transparent}
:focus::-moz-placeholder{color:transparent}
:focus:-ms-input-placeholder{color:transparent}
В Firefox не работают слайды…
спасибо братан ты просто супер
Забыли про ::-ms-input-placeholder для Edge 12+. http://caniuse.com/#search=%3A%3Aplaceholder
Поддерживается также и -webkit-: also supports webkit prefix
Спасибо. Отличные материалы.
Поправка. Свойство transition достаточно объявить в основном блоке. В hover оно уже лишнее. Понимаю, что Вы точно в курсе Комментарий, скорее, для тех, кто осваивает премудрости CSS.
«Сдвиг placeholder-а вниз при фокусе» чёто не пашет в хроме 51 :(
Столкнулся с проблемой что у меня 2 формы input text и каждая из них имеет разный background-color, соответственно мне необходимо сделать два разных цвета placeholder’а. А вот как это сделать — хз :)
Быть может вы знаете решение этой проблемы?
спасибо!!!
Огромное спасибо за статью!
Сдвиг placeholder-а вниз при фокусе не работает. Спасибо за статью в избранном, пользуюсь при верстке.
Для всех input+textarea плавное смещение placeholder вправо + прозрачность 0 при фокусе:
input::-webkit-input-placeholder{text-indent:0px;transition:all 0.7s ease;}
input::-moz-placeholder{text-indent:0px;transition:all 0.7s ease;}
input:-moz-placeholder{text-indent:0px;transition:all 0.7s ease;}
input:-ms-input-placeholder{text-indent:0px;transition:all 0.7s ease;}
input:focus::-webkit-input-placeholder{text-indent:50px; transition:all 0.7s ease;opacity:0;}
input:focus::-moz-placeholder{text-indent:50px; transition:all 0.7s ease;opacity:0;}
input:focus:-moz-placeholder {text-indent:50px; transition:all 0.7s ease;opacity:0;}
input:focus:-ms-input-placeholder{text-indent:50px; transition:all 0.7s ease;opacity:0;}
textarea::-webkit-input-placeholder{text-indent:0px;transition:all 0.7s ease;}
textarea::-moz-placeholder{text-indent:0px;transition:all 0.7s ease;}
textarea:-moz-placeholder{text-indent:0px;transition:all 0.7s ease;}
textarea:-ms-input-placeholder{text-indent:0px;transition:all 0.7s ease;}
textarea:focus::-webkit-input-placeholder{text-indent:50px; transition:all 0.7s ease;opacity:0;}
textarea:focus::-moz-placeholder{text-indent:50px; transition:all 0.7s ease;opacity:0;}
textarea:focus:-moz-placeholder {text-indent:50px; transition:all 0.7s ease;opacity:0;}
textarea:focus:-ms-input-placeholder{text-indent:50px; transition:all 0.7s ease;opacity:0;}
Пожалуй, самая понятная и полезная статья на эту тему. Спасибо!